The
<LongTextInput>
component wasn't called within a redux-form<Field>
>.
The original <LongTextInput>
has an addField: true
default prop. When admin-on-rest detects this prop, it automatically adds a redux-form <Field>
tag. So when including an Input component in a form, like so:
const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<LongTextInput source="title" />
</Simpleform>
</Edit>
)
React renders it as follows:
const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<Field name="title">
<LongTextInput source="title" />
</Field>
</Simpleform>
</Edit>
)
You may have embedded an input component inside another component, like so:
const CustomTextInput = (props) => <LongTextInput {...props} style={{ backgroundColor: 'red'}} />
const PostEdit = (props) => (
<Edit {...props}>
<SimpleForm>
<CustomTextInput source="title" />
</Simpleform>
</Edit>
)
As the <CustomTextInput>
doesn't have the addField: true
default prop, admin-on-rest won't add <Field>
.
See https://marmelab.com/react-admin/Inputs.html#writing-your-own-input-component for details.
There are 2 ways to deal with this error.
- Add the
addField: true
default prop to your component:
const CustomTextInput = (props) => <LongTextInput {...props} style={{ backgroundColor: 'red'}} />
CustomTextInput.defaultProps = { addField: true };
- Add
<Field>
in your component
const CustomTextInput = (props) => (
<Field name={props.source}>
<LongTextInput {...props} style={{ backgroundColor: 'red'}} />
</Field>