React-redux-form: react-bootstrap's Checkbox component

[rkrdo]

I'm trying to alter my state with a checkbox, using createFieldClass with controls.checkbox on the Checkbox component from react-bootstrap.

However, when checking the component, the state gets set to "on" instead of true or false, and once I check the checkbox, I cannot uncheck it. What would be the right way to do this?

Using an <input type="checkbox" /> inside a <Field> works fine, but I'd prefer to use the checkbox component react-bootstrap provides

It can be reproduced easily via this gist (should work fine if you paste it on esnextbin)

[cbioley]

That should be working:

const CheckboxField = createFieldClass({
  'Checkbox': props => ({
    onChange: e => props.onChange(e.target.checked)
  })
})

[rkrdo]

@cbioley that worked perfectly, thanks!

Off topic question, what would be a good channel in discord to ask stuff related to the project? I hesitated to ask this on the redux-form channel

[cbioley]

@rkrdo You're welcome ^^

I don't know.

You should ask @davidkpiano. He's really a nice guy.

[davidkpiano]

Huge thanks @cbioley! Anyway, @rkrdo I'm (for the most part) always available on the Reactiflux discord chat under davidkpiano. I'll see if we can reuse redux-form or create react-redux-form.

[rkrdo]

Sounds good, thanks! @davidkpiano @cbioley

[sakarit]

You can also fix it little bit cleaner like this:

const CheckboxField = createFieldClass({Checkbox: controls.checkbox})
Checkbox.defaultProps.type = 'checkbox'

@davidkpiano I tracked down the issue to this line, there is no type prop available in react-bootstrap's Checkbox.

[davidkpiano]

Thanks, @sakarit! You can also add it manually:

<Field ...>
  <Checkbox type="checkbox" />
</Field>