How to fix setState() gives the opposite value of checkbox? - reactjs

Question

This is my class component:
import React from 'react';
import { Jumbotron, Container, Label } from 'reactstrap';
import './Css.css';
class Settings extends React.Component {
state = {
isChecked: false,
}
isCheck(e) {
this.setState({
isChecked: e.target.checked
})
console.log(e.target.checked)
console.log(this.state.isChecked)
}
render() {
return (
<div className="margin">
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Settings</h1>
<div className="groupbox">
<Label className="lead">This is a checkbox</Label>
<input class="apple-switch" type="checkbox" onChange={e => this.isCheck(e)} />
</div>
</Container>
</Jumbotron>
</div>
);
}
}
export default Settings;
The problem that I have is that the values that I get in the console are inversed.
So when the checkbox is unchecked e.target.checked is false but this.state.isChecked is true, and when the checkbox is checked e.target.checked is true and this.state.isChecked is false.
I don't know why I'm facing this issue.
Is there anything that I did wrong?
I tried also to store the e.target.checked to a const checked and then pass it to the setState() but it gives me the same thing.
Any help is appreciated.

Answer 1

The problem is purely a logging one. There is a delay between setting the value and seeing it updated on state. Try:
isCheck(e) {
console.log(e.target.checked);
this.setState({
isChecked: e.target.checked
}, () => {
console.log(this.state.isChecked);
});
}
If you need to do something after state has been updated, then put it into a callback function inside the setState call, as above. The reason for this is that setState calls render (that is its main purpose), and React will do that asynchronously, when it's ready.

Answer 2

According to the doc
Think of setState() as a request rather than an immediate command to update the component
setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall. Instead, use componentDidUpdate or a setState callback (setState(updater, callback)), either of which are guaranteed to fire after the update has been applied
So setState() here is asynchronous, so in your case, to see the effect, just use a callback (here I use arrow function to maintain the context of this)
isCheck(e) {
this.setState(
{
isChecked: e.target.checked,
},
() => {
console.log(e.target.checked)
console.log(this.state.isChecked)
}
)
}