redux-form—array of checkboxes

Question

I have a Redux form which is working as it should, except one thing: I need to create an array of checkboxes, so that the user can choose between multiple options.

In HTML/PHP one would write something like that:

<form>
    …
    <input type="checkbox" name="item[]" value="120" />
    <input type="checkbox" name="item[]" value="231" />
    …
</form>

So on Serverside one would receive an array like so (assuming each box is checked): $item = [120, 231], where each item in the array corresponds to the value of the checkbox.

Doing the same with a redux-form like so:

let items = [{name:…, value:…}, …];

<form>
  {items.map(item => {
    <Field component="input" 
           type="checkbox"
           name={item.name + '[]'} 
           value={item.value}
  })}
</form>

results in those inputs: <input type="checkbox" name="item[]" value="true" />, what is not what I would expect. Additionally, checking on checkbox, checks each of the array.

So I changed the name attribute of the <Field /> to

name={`item[${item.value}]`}

what makes the checkboxes work as expected, but in turn result in that data when submitted:

 {
           //index: 0,   1,     ,…, 120, 121, …    ,231, …                      
     item: [undefinded,undefined,…,true,undefined,…,true,undefined,…]
 }

So my Question is: Am I wrong with the creation of the checkboxes, especially their names, or do have to transform the data, once at initialization time and a second time on submit?

If I have to transform the data, where would be the best place for that?

Answer 1

This is what I ended up doing:

<Field component="input" 
      type="checkbox"
      name={`item.${item.value}`} />

This gives you an object (rather than an array) as the output data structure. It's not quite what you asked for but it is convenient (and, IMO, more natural than other options that require searching the array when a value needs to be removed). Instead of getting [120, 231] you get

{
    120: true,
    231: true,
    165: false // be aware that things that have been checked, and then unchecked, will be explicitly marked false
}

If you want to convert it to an array by finding keys with truthy values, that's a simple thing to do onSubmit(). I'm using lodash: _.keys(_.pickBy(itemValue)) does the conversion quite nicely.