I'd like to know how to toggle a boolean state of a react component. For instance:
I have boolean state check in the constructor of my component:
constructor(props, context) {
super(props, context);
this.state = {
check: false
};
};
I am trying to toggle the state each time my checkbox is clicked, using the this.setState method:
<label><input type=checkbox" value="check" onChange = {(e) => this.setState({check: !check.value})}/> Checkbox </label>
Of course I get a Uncaught ReferenceError: check is not defined. So how can I achieve this?
Many thanks in advance.
Since nobody posted this, I am posting the correct answer. If your new state update depends on the previous state, always use the functional form of setState
which accepts as argument a function that returns a new state.
In your case:
this.setState(prevState => ({
check: !prevState.check
}));
See docs
Since this answer is becoming popular, adding the approach that should be used for React Hooks (v16.8+):
If you are using the useState
hook, then use the following code (in case your new state depends on the previous state):
const [check, setCheck] = useState(false);
// ...
setCheck(prevCheck => !prevCheck);