How to handle checkbox in loop react native

Question

How do I handle checkbox inside of loop in react native. Currently, my code is like this.

this.state.allItems.map((res, index) => {
 return(
     <CheckBox 
         color="green"
         style={{ marginRight: 20, }}
         checked={this.state.check1}
         onChange={()=>{ }}
/>

)

})

What's wrong with that code? Does it throw any errors / behave unexpectedly? — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Jul 17, 2020 at 14:06
Try explaining what you'd expect or what you are trying to achieve. Checkboxes can be handled in multiple ways. This probably mostly depends on how you want to store the checked value in the state. — Chris
– Chris, Commented Jul 17, 2020 at 14:29

Francois Nadeau · Accepted Answer · 2020-07-17 14:29:15Z

1

If I understand your question correctly, you have multiple items and you want them to be independently checkable.

To do that you will need for them to each have their own state value. How you do this will depend on your design needs, but form your code you would need to have an array instead of the check1 state.

Something like this:

this.state.allItems.map((res, index) => {
 return(
     <CheckBox 
         color="green"
         style={{ marginRight: 20, }}
         checked={this.state.checked[index]}
         onChange={()=> {
                  let { checked } = this.state;
                  checked[index] = !checked[index];
                  this.setState({checked});
         }
 }
/>

Of course you will need to populate the checked state properly with an array.

answered Jul 17, 2020 at 14:29

Francois Nadeau

7,4932 gold badges55 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

How to handle checkbox in loop react native

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related