How to store a state in localstorage for react?

Question

I'm trying to store my checkbox checked value into the localstorage in my react app. But everytime I store, it will store a previous state. Below is my code:

For render side:

  render () {   
    return (
                      <Checkbox
                        checked={this.state.checkedCheckpoint}
                        onChange={() => this.onChange('checkpoint')}
                      >
                      </Checkbox>
          )

For the onchange method:

  onChange (value){
    const { checkedCheckpoint } = this.state

    if (value === 'checkpoint')
    {
      if (checkedCheckpoint)
      {
        this.setState({checkedCheckpoint : false})
        console.log(checkedCheckpoint)
      }
      else
      {
        this.setState({checkedCheckpoint : true})
        console.log(checkedCheckpoint)
      }
    }
    localStorage.setObject('checkedCheckpoint', checkedCheckpoint)

What I mean by previous state is: If I initialize my checkpoint to be true, after I unchecked, I should get checkpoint: false right? But I get checkedCheckpoint: true. If I checked it, I should get checkedCheckpoint: true right? I will get checkedCheckpoint: false. Seems like it will always follow the previous state in localstorage. Anyone knows what's wrong?

Answer 1

You need to set it based on the new value not the old one

  onChange (value){
    const { checkedCheckpoint } = this.state

    if (value === 'checkpoint')
    {
      if (checkedCheckpoint)
      {
        this.setState({checkedCheckpoint : false})
        localStorage.setObject('checkedCheckpoint', false)
        console.log(checkedCheckpoint)
      }
      else
      {
        this.setState({checkedCheckpoint : true})
        localStorage.setObject('checkedCheckpoint', true)
        console.log(checkedCheckpoint)
      }
    }

Answer 2

You need to pass whatever logic you want to execute post state change as a second argrument to this.setState()

example:

state = {
    name: 'Johnny'
}

someMethod = () => {
     this.setState({name: 'Tim'})
     doSomethingElse(this.state.name) //doSomethingElse receives Johnny
}

I think what you're looking for is

state = {
    name: 'Johnny'
}

someMethod = () => {
    this.setState({name: 'Tim'}, doSomethingElse(this.state.name))
    //doSomethingElse receives Tim
}

See the docs for setState here.

Answer 3

Perhaps, you can do something like this:

<Checkbox
    checked={this.state.checkedCheckpoint}
    onChange={() => this.setState((prevState) => ({checkedCheckpoint: !prevState.checkedCheckpoint}),
    () =>{console.log(this.state.checkedCheckpoint)})}
>
</Checkbox>           

Also, the issue with your code was that it doesn't account for the fact that state in react setState happens asynchronously. As a consequence, it'll always show a previous state while logging.

Answer 4

React tries to batch the setState command. It is more like an asynchronous task. So when you execute this.setState({checkedCheckpoint : true}) it only tells react to set the state of 'checkedCheckpoint' to true but it does not execute that command at that moment. So basically when you are trying to set your localStorage variable it is still the previous state.

Try setting your new state in a variable like this.

onChange (value){
var newState;
const { checkedCheckpoint } = this.state

if (value === 'checkpoint') {
  if (checkedCheckpoint) {
    newState = false;
    console.log(newState);
  }
  else {
    newState = true;
    console.log(newState);
  }
  this.setState({checkedCheckpoint : newState});
  localStorage.setObject('checkedCheckpoint', newState);
}