<TextField>

The simplest of all fields, <TextField> simply displays the record property as plain text.

import { TextField } from 'react-admin';
<TextField source="name" />
// renders the record { id: 1234, name: 'John Doe' } as
// <span>John Doe</span>

<TextField> grabs the record from the current RecordContext, extracts the value of the source property, and displays it inside a Material UI <Typography> component.

Usage

Use <TextField> as descendent of:

• a record detail component (<Show>, <Edit>),
• a layout component for a list of records (<DataTable>, <SimpleList>, <SingleFieldList>)
• a RecordContextProvider

For instance, to render the title and teaser of a post in a show view:

import { Show, SimpleShowLayout, TextField } from 'react-admin';
export const PostShow = () => (
 <Show>
 <SimpleShowLayout>
 <TextField source="title" />
 <TextField source="teaser" />
 </SimpleShowLayout>
 </Show>
);

<TextField> requires a source prop to specify which property of the record is rendered. It can be a deep source (e.g. "author.name").

It also accepts common field props such as the sx prop to override its style.

Additional props are passed down to the underlying Material UI <Typography> component.

Displaying Values From More Than One Source

If you want to display data from more than one field, check out the <FunctionField>, which accepts a render function:

import { FunctionField } from 'react-admin';
<FunctionField
 label="Name"
 render={record => `${record.first_name}${record.last_name}`}
/>;

Edit In Place

In addition to rendering a field value, you may want to allow users to edit that value. You can redirect the user to an <Edit> page, or you can use the <InPlaceEditor> component to edit the value directly in the list or show view.

<InPlaceEditor> renders a <TextField> by default, and turns into a <TextInput> when the user clicks on it. It is useful for quick edits without navigating to a separate edit page.

import { Show, InPlaceEditor } from 'react-admin';
import { Stack, Box, Typography } from '@mui/material';
const CustomerShow = () => (
 <Show>
 <Stack direction="row" spacing={2}>
 <AvatarField />
 <CustomerActions />
 <Box sx={{ display: 'flex', justifyContent: 'center' }}>
 <Typography>Phone</Typography>
 <InPlaceEditor source="phone" />
 </Box>
 <Box sx={{ display: 'flex', justifyContent: 'center' }}>
 <Typography>Email</Typography>
 <InPlaceEditor source="email" />
 </Box>
 ...
 </Stack>
 </Show>
);

Check out the <InPlaceEditor> documentation for more details.