setState is not toggling values and returning undefined React

Question

This maybe a repetitive question but I am still not able to figure out why setState is not able to toggle boolean values? Here are the functions:

constructor(props){
    super(props)
    this.state = {
        isPlaying: false
    }
}

playButtonClicked = () => {
    this.setState((prevState) => ({
        isPlaying: !prevState.isPlaying
    }))
    console.log("updating state....state is="+this.isPlaying)  // Its printing undefined
    this.togglePlayPause();
}

Here's the div:

<button id="play-pause" onClick={this.playButtonClicked}></button>

Please let me know if you find the mistake. Thanks in advance.

this.state.isPlaying should go in console.log. Also, console log may not show your latest state. So, use callback of setstate. — Ajeet Shah, May 17 '20 at 00:11
First off, this.isPlaying that you are trying to log, is invalid. It would this.state.isPlaying, also setState is asynchronous, it will be not be updated when you try to log it. — Alexander Staroselsky, May 17 '20 at 00:11
Does this answer your question? [React setState not updating state](https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state) — Bassem, May 17 '20 at 01:30

score 3 · Accepted Answer · answered May 17 '20 at 00:15

3

 this.setState((prevState) => ({
        isPlaying: !prevState.isPlaying
    }), function() {
   console.log("updating state....state is="+this.state.isPlaying) 
  });

Setstate is async give console log in a callback.

answered May 17 '20 at 00:15

Hadi Pawar

1,090
1
11
23

setState is not toggling values and returning undefined React

1 Answers1