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