redux-form Field and Checkbox react-toolbox value checked from object

Question

I have this data:

...
initialValues: {
  alarm: 'normal',
  days: { mon: true, tue: true, wed: true, thu: false, friday: true }
}
...

to render, I do the following.

<Field name="days" component={({ input }) => {
  return (
    <div className='days-container'>
      <Checkbox label='Monday' checked={input.value.mon} onChange={input.onChange} />
      <Checkbox label='Tuesday' checked={input.value.tue} onChange={input.onChange} />
      ...
    </div>
  )
}}/>

but days value becomes Boolean:

days: true

as you would to maintain the initial structure?

you can edit the post you know?

martriay
– martriay

2016-09-21 21:53:47 +00:00
Commented Sep 21, 2016 at 21:53 — martriay
– martriay, Commented Sep 21, 2016 at 21:53
Modified, I did not see the option to edit

qhapaq
– qhapaq

2016-09-21 22:43:55 +00:00
Commented Sep 21, 2016 at 22:43 — qhapaq
– qhapaq, Commented Sep 21, 2016 at 22:43

qhapaq · Accepted Answer · 2016-09-22 14:33:11Z

1

I did it this way

<Field name="days" label='Days' component={({ input, label }) => {
  return (
    <div className='days-container'>
      <span className='label'>{label}</span>
      {[ 'mon', 'tue', 'wed', 'thu', 'friday'].map((name, index) =>
          <Checkbox label={name} checked={input.value[name]} key={index} onChange={checked => {
            const setter = {};
            setter[name]=checked;
            input.onChange({...input.value, ...setter})}} />
      )}
    </div>
  )
}}/>

there a better way?

answered Sep 22, 2016 at 14:33

qhapaq

234 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Over a year ago

This is really good. In my case I ended up creating a custom reducer plugin for redux form and handling each tickbox separately by listening on it's onclick event... This is much easier.

Collectives™ on Stack Overflow

redux-form Field and Checkbox react-toolbox value checked from object

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related