Using the Controller components, what is needed to show the Label in the TextFields?

user_7948731 0
Viewed 321

Using React-admin, I am using the ShowController component, which gives me more freedom to customize the ShowView. However, I would like to keep seeing the labels in the TextFields, but, they are gone.

This piece of code shows how I am using the ShowController and, it works partially: only show the record values, not the labels (I also tried without the prop "label", it doesn't work neither).

const OrderShow = props => {
    return (<ShowController {...props}>
        {controllerProps => {
            return (
                <Grid container spacing={8}>
                     <Grid item xs={3}>
                         <TextField label="ID" source="id" {...controllerProps} />
                         ...

What is missing to show the labels as in the ShowView standard component?

react-admin reactjs
1 Answers

TextFields' labels are usually filled by their source property. If you want to use <ShowController> component with custom layout, I suggest you to create another custom component and use it inside of <Show>, <ShowView> or <SimpleShowLayout>.

I wrapped the fields with SimpleForm component to be able to show their labels and hide the Toolbar with custom CardActions.

Example:

const FormToolbar = () => (
 <CardActions style={{display: 'none'}}>
 </CardActions>
);

const FormDiv = ({controllerProps, ...props}) => (
 <Grid container spacing={24}>
   <Grid item xs={12}>
     <SimpleForm toolbar={<FormToolbar/>}>
      <TextField {...props} record={controllerProps.record} source="name"/>
     </SimpleForm>
 </Grid>
</Grid>
);

const OrderShow = props => (
 <ShowController {...props} title="Order">
    {controllerProps =>
        <Show actions={<ShowActions pageType="show" />} {...props} {...controllerProps}>
            <SimpleShowLayout>
                <FormDiv controllerProps={controllerProps} />
            </SimpleShowLayout>
        </Show>
    }
</ShowController>
);

export default OrderShow;
user_48964670
Related