CODEWITHSUNDEEP
reactjsreduxredux-formchildren
Christoffer Corfield Aakre
Christoffer Corfield Aakre

Reputation: 707

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!

Upvotes: 1

Views: 722

Answers (1)

Galupuf
Galupuf

Reputation: 2957

You just need to remove your label parameter

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

Upvotes: 1

Related Questions