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?

remove value attribute.

Fazal Rasel
– Fazal Rasel

2016-12-09 19:47:43 +00:00
Commented Dec 9, 2016 at 19:47 — Fazal Rasel
– Fazal Rasel, Commented Dec 9, 2016 at 19:47
Old PHP way was the only way :)

Marecky
– Marecky

2021-03-05 11:50:05 +00:00
Commented Mar 5, 2021 at 11:50 — Marecky
– Marecky, Commented Mar 5, 2021 at 11:50

waterproof · Accepted Answer · 2017-06-22 21:24:47Z

7

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.

edited Jun 22, 2017 at 21:24

answered Apr 13, 2017 at 19:49

waterproof

5,1935 gold badges34 silver badges31 bronze badges

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

Comments

Giannis · Accepted Answer · 2016-12-11 09:59:46Z

0

You can render the array of checkboxes/items as below, and keep track of the checked checkboxes using the onChange event. For example use a selectedItems array on the state, and add/remove items on the onItemChange implementation. On form submit handler you will have all checked items available on the state.

{
  items.map((item, index) => {
    return (
      <div className="checkbox" key={ index }>
        <label>
          <input type="checkbox"
            onChange={ this.onItemChange.bind(this, index) } />
            { item.name }
        </label>
      </div>
    );
  })
}

answered Dec 11, 2016 at 9:59

Giannis

4866 silver badges8 bronze badges

3 Comments

Anarion Over a year ago

Binding in render funcion is a bad practice. Do in in constructor.

KevinSplitt Over a year ago

@Anarion This is generally true, however in this instance he his mapping through an array of items and binding onItemChange to the index to consume the input value. This is a common pattern.

Anarion Over a year ago

@Splitty isn't this what I suggested?

Collectives™ on Stack Overflow

redux-form—array of checkboxes

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related