Search code examples
reactjsreduxredux-formchildren

Redux-form: Can't get children from Field component


I'm trying to render a select, and want to be able to do something like this to add options:

<Field component={RenderSelect} name="subjects" label="Subjects">
        <option value="maths">Maths</option>
        <option value="english">English</option>
</Field>

I have a createRenderer function:

const createRenderer = render => ({input, name, label, children}) => {
  return (
    <div key={name}>
    <label htmlFor={name}>{label}</label>
    {render(input, name, children)}
    </div>
  )
},

and my RenderSelect looks like this:

const RenderSelect = createRenderer((input, name, label, children) => {
    return (
      <select name={name} {...input}>
      {children}
      </select>
    )
})

I was under the impression that I could just destructure the children prop off the Field like I do for input, name, label, etc, although this does not seem to work. When I run the code, no options appear in my select, and an inspection of the DOM verifies that there are no options. Any help would be much apprecited. Thanks in advance!


Solution

  • You just need to remove your label parameter

    const RenderSelect = createRenderer((input, name, children) => {
        return (
            <select name={name} {...input}>
                {children}
            </select>
        )
    });