How to setstate for the dynamic checkboxes in a loop in react?

Question

I am loading checkboxes in a loop. I have difficulties in setting the states for the dynamic checkboxes.

I am loading checkboxes in a loop. I need to set the state of the checkboxes to make them work. when I set the state every checkbox gets checked so please give me a solution

Component Initialization

const ChildComponent = props =>
  <div key={"comp" + props.number} className="relay-team-list">
      <div className="read-more">
          <a href="#">Team {props.number} - Click to Rename</a>
      </div>
      {
          props.members_arr.length > 0 ? (
              props.members_arr.map((member, i) =>
                  member.position === props.number ? (
                      <div key={"members" + i} className="columns is-mobile list-item" id={"member" + props.number}>
                          <div className="column is-one-third">
                              <img src={require('../images/user.png')} />
                          </div>
                          <div className="column txt-mid-grey relay-team-list-text">
                              <p>{member.members_arr.member_name}</p>
                              <p></p>
                              <span className="check-icon"><input type="checkbox" value="checkedB"
                                  checked={this.state.enabledCheckBox + i}
                                  label={{ children: 'cardreader' + i }}
                                  onChange={this.passMemberID}
                              /></span>

                          </div>
                      </div>
                  ) : ''
              )
          ) : ''
      }
  </div>;

The Function

passMemberID = () => {
  this.setState((prevState, props) => ({
    enabledCheckBox: !prevState.enabledCheckBox
  }), () => console.log(this.state.enabledCheckBox))
}

Constructor

constructor(props) {
  super(props);
  this.state = {
    enabledCheckBox: false,
  }
}

I need to have different states to every checkbox so I can click them one by one now all are getting checked at once

It's the best to use an array in your state: this.state = {enabledCheckedBoxes: []} and handle each checkbox by it's index: passMemberID = (index) => () => {yourlogic}. And in your UI call the passMemberID by the index of the checkbox. You could init the array after mounting the component. Further, here is a quick recommendation for cleaning your code — Navid
– Navid, Commented Aug 17, 2019 at 6:25
@Navid you mean in UI set as {()=>this.passMemberID(i)} like this? — user9319990
– user9319990, Commented Aug 17, 2019 at 6:35
@Navid I am new to react and studying alone could you please give me some code example — user9319990
– user9319990, Commented Aug 17, 2019 at 6:44
@Navid thanks for the idea you have given and I have fixed the code to the standard level using the link you have given — user9319990
– user9319990, Commented Aug 18, 2019 at 5:54

Biswajit Mahanta · Accepted Answer · 2019-08-17 16:52:23Z

2

Constructor:

constructor(props) {
  super(props);
  this.state = {
    checkBoxObj: {}
  };
}

Component:

<input type="checkbox" 
     checked = {this.state.checkBoxObj[i] || false}
     onChange={() => this.passMemberID(i)}
/>

Function:

passMemberID = (i) => {
  this.setState({
    checkBoxObj: {
      ...this.state.checkBoxObj, ...{[i]: !this.state.checkBoxObj[i]}
    }
  })
}

edited Aug 17, 2019 at 16:52

answered Aug 17, 2019 at 7:39

Biswajit Mahanta

364 bronze badges

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

3 Comments

Morlo Mbakop Over a year ago

This value="checkedB" is not needed

Biswajit Mahanta Over a year ago

@MorloMbakop is right. value and label are not necessary at all. I just put them from the questions. I am making an edit to remove then.

user9319990 Over a year ago

@MorloMbakop I am using the value for a different validation and thanks guys I finally found a way to do it, it is a bit similar to Mahanta's code but I used an array instead of the object

Collectives™ on Stack Overflow

How to setstate for the dynamic checkboxes in a loop in react?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related