Array of Boolean As Checkbox Value? - react-native

Question

I have a statu structure array that is called 'devices'. It has ID (item ID), name (item name), renew (string value from DDL), and check (boolean value, whether the checkbox is checked or not)
These information will be displayed as items one by one.
While I don't have problem displaying name and ID, My problem is actually on both renew and check, but I want to solve check first.
I have tried the following on the checkbox:
<CheckBox
checked={item.check}
onPress ={ () =>{
if (item.check === false){
item.check = true
}
else {
item.check = false
}
}}
/>
(I use item instead of this.state.devices, because i mapped the array)
This one is where i created devices:
constructor() {
super();
this.state = {
devices: [
{
check: false,
name: 'PHONE',
id: '01658',
renew: '',
},
{
check: false,
name: 'PHONE',
id: '04523',
renew: ''
},
{
check: false,
name: 'LAPTOP',
id: '04451',
renew: ''
},
{
check: false,
name: 'PHONE',
id: '01165',
renew: ''
},
{
check: false,
name: 'TABLET',
id: '01015',
renew: ''
},
]
};
}
This is where the array map start and where I made the checkbox:
render() {
return (
<ScrollView style={styles.container}>
{this.state.devices.map((item, index) => {
console.log("start");
return (
<React.Fragment key={index}>
<View style={styles.itemRow}>
<View style={styles.itemCell}>
<CheckBox
checked={item.check}
onPress ={ () =>{
if (item.check === false){
item.check = true
}
else {
item.check = false
}
}}
/>
</View>
I expected the checkbox to change its value when pressed, and then the boolean value will be written on item.check of the respective index. What happened are either the checkbox value changed all at once as a group; or the value wont change at all.

Answer 1

You have to do a setState to update the checkbox. For example, you could do something like:
onPress={()=>this.handleCheck(item.id}
where handleCheck is:
handleCheck = (id) => {
let tempArr = this.state.devices
let updatedArr=tempArr.map(item => {
if (item.id === id) {
item.check = !item.check
return item
}
return item
})
this.setState({devices:updatedArr})
}