React Checkbox Group / Individual Checkbox

Question

I am building a section of my application that allows a user to make selections of certain items through the use of checkboxes. My goal is to have an array in the component state (this.state.schoolsSelected) that is edited on click events to store all of the selected values onChange and then submit that array.

There are 5 checkbox section options that represent types of schools (elem, middle, high, etc.) and then each school is rendered with a checkbox individually. My eventual goal is to get all the values of all selected checkboxes.

I am having trouble handling the different scenarios with component state, and was hoping somebody else had addressed this issue before.

My current solution is to have each checkbox rendered with its "checked" property representing the group of schools as its checked state (i.e. this.state.isMiddleChecked, this.state.isHighChecked) . When I select a checkbox like "Select all Middle", all middle schools are selected.

return(
      <Col key={index} sm={3}>
        <Checkbox
          checked={this.state.isHighChecked}
          value={index}
          onChange={this.onChange}
        >{school.name}</Checkbox>
      </Col>
    )

However, there is no way for me to select any of the checkboxes individually because they rely on this group property.

Please let me know if you need any clarifications on what I am asking.

is this.onChange used anywhere else in the application? Is this binding the function to allow it to be clicked? Is this a function? — Demon
– Demon, Commented Jun 9, 2018 at 0:41

Bilal · Accepted Answer · 2018-06-09 00:42:36Z

0

how about adding a new attribute (like id,class or any given name ), that you can select all your individually grouped checkboxes?

answered Jun 9, 2018 at 0:42

Bilal

12210 bronze badges

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

2 Comments

user5734311 Over a year ago

that's a comment, not an answer

Bilal Over a year ago

I don't have the reputation required yet

Collectives™ on Stack Overflow

React Checkbox Group / Individual Checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related