React-admin: Can't use wrapped SelectInput inside SimpleForm

Created on 20 Oct 2017  路  1Comment  路  Source: marmelab/react-admin

I have a simple wrapped component:

import React from 'react';
import { SelectInput } from 'admin-on-rest';

export default props => <SelectInput {...props} choices={[
        { id: 'male', name: 'Male' }, 
        { id: 'female', name: 'Female' },
    ]} />

What you were expecting:
I was expecting to be able to use it inside a SimpleForm like so:

export default props => (
    <Edit title={<Title />} {...props}>
        <SimpleForm>
            <DisabledInput source="id" />
            <TextInput source="firstName" />
            <TextInput source="lastName" />
        <GenderSelect source="gender"/>
        </SimpleForm>
    </Edit>
);

What happened instead:
instead I get the following error:

Uncaught TypeError: Cannot read property 'value' of undefined
    at new SelectInput (SelectInput.js:134)

Environment

  • Admin-on-rest version: ^1.3.2
  • Last version that did not exhibit the issue (if applicable): n/a
  • React version: ^16.0.0
  • Browser: Chrome 61.0.3163.10
  • Stack trace (in case of a JS error):
SelectInput.js:134 Uncaught TypeError: Cannot read property 'value' of undefined
    at new SelectInput (SelectInput.js:134)
    at constructClassInstance (react-dom.development.js:9760)
    at updateClassComponent (react-dom.development.js:10215)
    at beginWork (react-dom.development.js:10605)
    at performUnitOfWork (react-dom.development.js:12573)
    at workLoop (react-dom.development.js:12682)
    at HTMLUnknownElement.callCallback (react-dom.development.js:1299)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:1338)
    at invokeGuardedCallback (react-dom.development.js:1195)
    at performWork (react-dom.development.js:12800)
    at batchedUpdates (react-dom.development.js:13244)
    at performFiberBatchedUpdates (react-dom.development.js:1646)
    at stackBatchedUpdates (react-dom.development.js:1637)
    at batchedUpdates (react-dom.development.js:1651)
    at Object.batchedUpdatesWithControlledComponents [as batchedUpdates] (react-dom.development.js:1664)
    at dispatchEvent (react-dom.development.js:1874)

Most helpful comment

You need to set the addField default prop value to true in your custom input, as explained in the custom input component document.

import React from 'react';
import { SelectInput } from 'admin-on-rest';

const GenderSelect = props => <SelectInput {...props} choices={[
        { id: 'male', name: 'Male' }, 
        { id: 'female', name: 'Female' },
    ]} />
GenderSelect.defaultProps = {
  addField: true,
};
export default GenderSelect;

>All comments

You need to set the addField default prop value to true in your custom input, as explained in the custom input component document.

import React from 'react';
import { SelectInput } from 'admin-on-rest';

const GenderSelect = props => <SelectInput {...props} choices={[
        { id: 'male', name: 'Male' }, 
        { id: 'female', name: 'Female' },
    ]} />
GenderSelect.defaultProps = {
  addField: true,
};
export default GenderSelect;
Was this page helpful?
0 / 5 - 0 ratings