vendredi 16 août 2019

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

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>
               {
                   members_arr.length > 0 ?(
                       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=
                                                                           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




Aucun commentaire:

Enregistrer un commentaire