`<WrapperField>`

This component simply renders its children. Why would you want to use such a dumb component? To combine several fields in a single cell (in a <Datagrid>), in a single row (in a <SimpleShowLayout>) or in a group of inputs (in a <SimpleFormConfigurable>) .

Usage

<WrapperField> allows to define the label and sort field for a combination of fields:

import { List, Datagrid, WrapperField, TextField } from 'react-admin';

const BookList = () => (
   <List>
       <Datagrid>
            <TextField source="title" />
            <WrapperField label="author" sortBy="author.last_name">
                <TextField source="author_first_name" />
                <TextField source="author_last_name" />
            </WrapperField>
      </Datagrid>
  </List>
);

import { Edit, WrapperField, TextInput, SimpleFormConfigurable } from 'react-admin';
import { Stack } from '@mui/material';

const PostEdit = () => (
    <Edit>
        <SimpleFormConfigurable>
            <TextInput source="title"/>
            <WrapperField source="author">
                <Stack>
                    <TextInput source="author_first_name"/>
                    <TextInput source="author_last_name"/>
                </Stack>
            </WrapperField>
        </SimpleFormConfigurable>
    </Edit>
);

Tip: If you just want to combine two fields in a string, check the <FunctionField> component instead.

Props

<WrapperField> accepts the common field props.