[admin-on-rest] [Error] No Field error on an Input component

admin-on-rest-no-field-error.md

The <LongTextInput> component wasn't called within a redux-form <Field>>.

Probable Cause

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.

Solutions

There are 2 ways to deal with this error.

1. Add the addField: true default prop to your component:

const CustomTextInput = (props) => <LongTextInput {...props} style={{ backgroundColor: 'red'}} />
CustomTextInput.defaultProps = { addField: true };

2. Add <Field> in your component

const CustomTextInput = (props) => (
    <Field name={props.source}>
        <LongTextInput {...props} style={{ backgroundColor: 'red'}} />
    </Field>