Display Field in Edit Form

Question

Currently, if I try to place a Field into an Edit form, the field doesn't display at all. There is no errors in the console or the terminal about why it wont.

Example:

<Edit undoable={false} {...props}>
  <SimpleForm>
    <FormRow>
      <TextField source="id"/>
      <TextField source="name"/>
    </FormRow>
  </SimpleForm>
</Edit>

will not display either of these on the page load, it will simply be blank.

Is there any way to use fields in the Edit form?

score 1 · Accepted Answer · answered Jul 12 '20 at 06:18

You need to pass in the record prop (and basePath if its a reference).

The Edit component does not get the record prop so create a form component and it will get passed the record as a prop

eg.

const ProjectEdit: FC<EditComponentProps> = props => {
    const classes = useStyles();
    return (
        <RA.Edit {...props} title={<ProjectTitle />}>
            <RA.SimpleForm>
                <ProjectForm />
            </RA.SimpleForm>
        </RA.Edit>
    );
};



export const ProjectForm = (props: any) => {
    return (
        <Box flex={1} mr={{ md: 0, lg: '1em' }}>
            <RA.TextInput source="name" fullWidth={true} />

            <Typography variant="h6" gutterBottom>
                Tasks
            </Typography>

            <RA.TextField
                source="name"
                fullWidth={true}
                record={props.record}
            />
            <RA.ReferenceManyField
                label="Tasks"
                reference="Task"
                target="projectId"
                fullWidth={true}
                record={props.record}
                basePath="/Task"
            >
                <RA.SingleFieldList fullWidth={true}>
                    <RA.ChipField source="name" fullWidth={true} />
                </RA.SingleFieldList>
            </RA.ReferenceManyField>
        </Box>
    );
};

Display Field in Edit Form

1 Answers1