I am simply trying to change a state by means of handlers in react but when executing the functions the state does not change.
Here I have the functions, the state and the objects where I send the props
It should be noted that I use 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>
)
}
}
Here I call the handler I went through props
export default class GameData extends React.Component{
constructor(){
super()
}
render(){
return(
<div id="GameData">
<button onClick={this.props.pauseMethod}>pause</button>
</div>
)
}
}
Here is the complete error, it happens when you press the button and operate the handler
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)