Adding checked checkboxes to an array and removing the unchecked ones - react native - react-native

Question

What I need to do is - add/remove the name of each checkbox(which are checked/unchecked by the user) in an array and send to the server. I am stuck in the following code. Any help is appreciated. Thankyou
class App extends Component<Props> {
render() {
return (
<View style={{ padding: 15 }}>
{
response.map(
item => {
return (
<CheckBoxItem label={item.name} />
);
}
)
}
</View>
);
}
}
CheckBoxItem.js
class CheckBoxItem extends Component<Props> {
state = {
check: false,
problemTypeArray: [],
}
changeArray = (label) => {
let array = [...this.state.problemTypeArray, label];
let index = array.indexOf(label);
console.log('array', array);//returns array with length 1 all the time
}
render() {
return (
<View>
<CheckBox value={this.state.check} onValueChange={(checkBoolean) => { this.setState({ check: checkBoolean }); this.changeArray(this.props.label); }} />
<MyText>{this.props.label}</MyText>
</View>
);
}
}
export default CheckBoxItem;

Answer 1

The real trick to this is to maintain a list of the selected items in the parent component. Each CheckBoxItem can control its own state but you will need to pass a value back to the parent component each time it is checked/unchecked.
As you haven't shown where your CheckBox component has come from, I will show you how to do it using the react-native-elements CheckBox. The principles can then be applied to your own CheckBox.
Here is the App.js
import CheckBoxItem from './CheckBoxItem'
export default class App extends React.Component {
// set some initial values in state
state = {
response: [
{
name:'first'
},
{
name:'second'
},
{
name:'third'
},
{
name:'fourth'
},
{
name:'fifth'
},
{
name:'sixth'
},
],
selectedBoxes: [] // this array will hold the names of the items that were selected
}
onUpdate = (name) => {
this.setState(previous => {
let selectedBoxes = previous.selectedBoxes;
let index = selectedBoxes.indexOf(name) // check to see if the name is already stored in the array
if (index === -1) {
selectedBoxes.push(name) // if it isn't stored add it to the array
} else {
selectedBoxes.splice(index, 1) // if it is stored then remove it from the array
}
return { selectedBoxes }; // save the new selectedBoxes value in state
}, () => console.log(this.state.selectedBoxes)); // check that it has been saved correctly by using the callback function of state
}
render() {
const { response } = this.state;
return (
<View style={styles.container}>
{
response.map(item => <CheckBoxItem label={item.name} onUpdate={this.onUpdate.bind(this,item.name)}/>)
}
</View>
);
}
}
Here is the CheckBoxItem
import { CheckBox } from 'react-native-elements'
class CheckBoxItem extends Component<Props> {
state = {
check: false, // by default lets start unchecked
}
onValueChange = () => {
// toggle the state of the checkbox
this.setState(previous => {
return { check: !previous.check }
}, () => this.props.onUpdate());
// once the state has been updated call the onUpdate function
// which will update the selectedBoxes array in the parent componetn
}
render() {
return (
<View>
<CheckBox
title={this.props.label}
checked={this.state.check}
onPress={this.onValueChange}
/>
</View>
);
}
}
export default CheckBoxItem;
Explanation
When a CheckBoxItem is created two things are passed to it. One is a label and the second is an onUpdate function. The onUpdate function links the CheckBoxItem back to the parent component so that it can manipulate the state in the parent.
The onUpdate function takes the previous value of the state, before this update is applied, and it looks to see if the name of the checkbox exists in the selectedBoxes array. If it exists in the selectedBoxes array it is removed, otherwise it is added.
Now there exists an array in the parent component that you can access that contains all that items that have been selected.
Snack
Want to try out my code? Well I have created a snack that shows it working https://snack.expo.io/#andypandy/checkboxes
Setting state
You may have noticed that I am doing some unusual things with setState. I am making sure that setState gets called properly by using the previous value of the state and then applying my updates to that. I am also using the fact that setState takes a callback to perform actions after the state has been updated. If you would like to read more here are some great articles on setState.
https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296
https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6