Search code examples
admin-on-rest

Error on Creating custom ReferenceInput with separate component

I'm trying to creating my ReferenceInput which contains SelectInput inside of it.

The code below is works perfectly (Please focus at ReferenceInput) enter image description here

However, I would like to separate it into another component and pass data as props. I made it like this. enter image description here

enter image description here

When I run it, this error occurs enter image description here

in this file https://github.com/marmelab/admin-on-rest/blob/49a616c93d1ee5ea0bfa3c5f7abea0bb29c8d01c/src/mui/input/ReferenceInput.js#L243

What wrong did I do ?

Thanks

Solution

  • Input components are using Redux-Form for actually rendering the form and connecting the application state to your input component.

    The input props is passed by ReferenceInput behind the scenes to its child.

    If you want to create the child then you need to do something like below. This is code from my application but I am sure you will see the pattern.

    const TaleGenreInput = ({style, text, ...props}) => {
  return (
    <div style={style.container} >
      <span style={style.span}>{text}:&nbsp;</span>
      <ReferenceInput {...props} reference="genres" >
        <GenreInputGroup {...props} style={style} elStyle={style.elStyle} optionText='name' />
      </ReferenceInput>
    </div>
  )
}

const GenreInputGroup = ({style, elStyle, optionText, ...rest}) => {
  return (
    <div>
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
      <SelectInput {...rest} style={style.dropdown} elStyle={style.dropDownElStyle} optionText='name' allowEmpty />
    </div>
  )
}

    the {...rest} makes sure all props being passed from the parent go into the SelectInput. You can also console log its value to see everything it contains. Helps a lot with debugging.