React checkbox displaying incorrect value

Question

I have a simple react component:

export default class RidiculousCheckbox extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: true,
        };
    }

    handleInputChange(event) {
        window.console.log("Value of event:" + event.target.checked);
        this.setState({isChecked: event.target.checked});
        window.console.log("State after setting, is checked:" + this.state.isChecked);
    }

    render() {
        return (
            <form>
                <input
                    type="checkbox"
                    checked={this.state.isChecked}
                    onChange={this.handleInputChange.bind(this)}/>
            </form>
        );
    }
}

When I display it for the first time the box is checked. Then I click on it, the box unchecks

Value of event:false
State after setting:true

If i click it again, the check box comes back, and the output:

Value of event:true
State after setting:false

Why is the state being set to true in the first example, when the value of event.target.checked is clearly false?

You can use callback on setState if you need to jsfiddle.net/u27ztejm/1 — Nenad Vracar
– Nenad Vracar, Commented Nov 22, 2017 at 19:52

Denis Ivanchenko · Accepted Answer · 2017-11-22 19:53:00Z

3

It's because setState function is asynchronous and when you're checking for new value "State after setting:true" - its just didn't change yet.

If you want to look on state after setState, use callback:

this.setState({...}, () => {
  window.console.log("State after setting, is checked:" + this.state.isChecked);
})

answered Nov 22, 2017 at 19:53

Denis Ivanchenko

1061 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abdennour TOUMI · Accepted Answer · 2017-11-22 19:46:19Z

0

Replace

this.setState({isChecked: event.target.checked});

By

this.setState(({ isChecked }) => ({ isChecked: !isChecked }));

And everything should work fine since you are toggling the value.

Or more readable :

this.setState((previousState) => ({ isChecked: !previousState.isChecked }));

answered Nov 22, 2017 at 19:46

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Collectives™ on Stack Overflow

React checkbox displaying incorrect value

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related