how in reactjs checkboxes with same name keep values as array

Question

do get to point quick

<input type="checkbox" name="name1[]" value="1" />
<input type="checkbox" name="name1[]" value="2" />

note the brackets in name [] - in classic html, posting form with this, the POST body would contain this

{name1:[1,2]}

now building a reactjs, inputs have name, ref, but can i use the brackets there too? does not seem to work... having predefined objects, trough .map() function i output the checkboxes, but how to keep their values qrouped with the shortest code?

actually, its supersimple, if i would write it as

<select ref="name1" name="name1" multiple="true" ....

how simplest way do this with checkboxes, with select i have result in this.refs["name1"], without any overhead hassle, how to do it with checkboxes pls? to avoid any crazy long coding?

Muhammad Mehar · Accepted Answer · 2019-05-23 15:19:46Z

1

The way is to wrap checkbox in a parent div & then access them through its ref as follow:

<div
  ref={ref => this.inputs = ref}
>
  <input type="checkbox" name="name1" value="1" />
  <input type="checkbox" name="name2" value="2" />
  <input type="checkbox" name="name3" value="3" />
</div>

const array = this.inputs.children

const name1 = array[0]
const name2 = array[1]
const name3 = array[2]

I hope it help you.

answered May 23, 2019 at 15:19

Muhammad Mehar

1,0557 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

how in reactjs checkboxes with same name keep values as array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related