I'm a newbie with React Native, I'm building a quiz application with multiple choices by using "react-native-elements" to generate the checkboxes. But I don't know how to control the multi-check function. I have searched and found a solution here.
But I still don't understand that when using Michael Peyer solution, which is the state I should define on the constructor function to adapt this solution?
constructor(props) {
super(props);
this.state = ??;
}
This follows the basic principles of RN and handling an array inside state. What I checked the react-native-elements docs, it should work as is. Although there may be some room for improvement, but start with this:
constructor(props) {
super(props);
this.state = {
checkboxes: [{
id: 1,
title: 'one',
checked: false,
}, {
id: 2,
title: 'two',
checked: false,
}],
};
}
...
toggleCheckbox(id) {
const changedCheckbox = this.state.checkboxes.find((cb) => cb.id === id);
changedCheckbox.checked = !changedChecbox.checked;
const checkboxes = Object.assign({}, this.state.checkboxes, changedCheckbox);
this.setState({ checkboxes });
}
...
render ()
return (
this.state.checkboxes.map((cb) => {
return (
<Checkbox
key={cb.id}
title={cb.title}
checked={cb.checked}
onPress={() => this.toggleCheckbox(cb.id)} />
)
})
)
toggleCheckbox(id) { let changedCheckbox = this.state.checkboxes.find((cb) => cb.id === id); changedCheckbox._checked = !changedCheckbox._checked; let chkboxes = this.state.checkboxes; for (let i=0; i < chkboxes.length; i++) { if (chkboxes[i].id === id) { chkboxes.splice(i, 1, changedCheckbox); }; }; this.setState({ checkboxes: chkboxes, }); }Try examining this:
import { CheckBox, View } from 'react-native'
class QuizScreen extends Component {
constructor(props) {
super(props)
// this is the default state on page load
this.state = {
checkbox1: false,
checkbox2: false,
checkbox3: false,
}
}
render() {
return (
<View> ... etc
<CheckBox
value={this.state.checkbox1}
onChange={() => this.setState({ checkbox1: !this.state.checkbox1 })}
/>
<CheckBox
value={this.state.checkbox2}
onChange={() => this.setState({ checkbox2: !this.state.checkbox2 })}
/>
<CheckBox
value={this.state.checkbox3}
onChange={() => this.setState({ checkbox3: !this.state.checkbox3 })}
/>
</View>
)
}
}
What is going on?
this.state.checkbox1 is the current valuethis.setState({ prop: 'value' }) refers to props from your constructorthis.setState({ checkbox1: !this.state.checkbox1 }) sets the value to the opposite of what it's currently set toThe problem in the question you linked is that the person had:
this.state = { checked: false }
but he/she has multiple checkboxes, so they are all editing the same property on the state object.
Notice how my example has 3 properties on the state object. The other answer by zvona in here is very illustrative for handling multiple.
