Problems with setState Handlers in React

Question

I'm simply trying to change the state of my component via handlers in react, but at the moment of executing the functions the state doesnt change. Here you have the handlers, the state, setStates and the components which I send the handlers as properties

BTW: I'm using webpack with babel loader

export default class Game extends React.Component{
constructor(){
    super()
    this.state={
        pause: null
    }

}
PauseShow(){
    this.setState={ pause: "block" }
    console.log("pauseshow")
}
PauseHide(){
    this.setState={ pause: "none" }
    console.log("pausehide")
}
render(){

    return(
        <div className="big-box">
            <Player idc="Game" src="assets/Fly_Me_to_the_Aegis_Seven_Moon.mp3"/>
            <GameOutput/>
            <GameData pauseMethod={this.PauseShow.bind(this)}/>
            <GameInput />
            <GamePause display={this.state.pause} pauseMethod={this.PauseHide.bind(this)}/>

        </div>
    )
}

} Aquí llamo al un handler que pasé por props

export default class GameData extends React.Component{
constructor(){
    super()
}
render(){
    return(
        <div id="GameData">
            <button onClick={this.props.pauseMethod}>pause</button>
        </div>

    )
}

} Here we have the error showed at console when clicking on a button that makes the handler execute

backend.js:8730 Uncaught TypeError: inst.setState.bind is not a function at getData (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8730:49) at walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8576:57) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native) at walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8578:20) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native) at walkNode (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8578:20) at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/backend.js:8579:15 at Array.forEach (native)

Answer 1

You can't update your state as this.setState{pause: "block"}. Your state is an function and you need to pass it an object as parameter. Thus:

this.setState({pause: "block"})

is the right way to update your state.

See this code:

class Test extends React.Component {
  constructor(){
      super();
      this.state = {
        text: ""
      }
  }
  pauseMethod(){
      this.setState({text: "paused"}, () => console.log(this.state.text))
  }

  render(){
    return (
        <div><GameData pauseMethod={this.pauseMethod.bind(this)} /></div>
      )
  }
}

class GameData extends React.Component{      
  render(){
      return(
          <div id="GameData">
              <button onClick={this.props.pauseMethod}>pause</button>
          </div>
      )
  }
}

React.render(<Test />, document.getElementById('container'));

Here is the fiddle.