React ES6 - this error

1

On Codepen I made a Complete component with a toggle component with onClick={this.toggleShadow} but the this in toggleShadow() function returns undefined. The pen is Dungeon crawler

Edit: The function is called but this is undefined

2

do the binding in constructor and see what happens, do like this:this.toggleShadow = this.toggleShadow.bind(this);

3

I don’t know if you did something to fix this but it’s working now. If I put console.log(“toggle!”) in your toggleShadow function, and click the button, I see “toggle!” logged to the console.

4

The function is called just that this is undefined

5

As @abdellah-el-mennani says, you can bind it in the constructor

this.toggleShadow = this.toggleShadow.bind(this);

or you can do -

    <ToggleShadow onClick={this.toggleShadow.bind(this)}/>

In es6, you can write

    <ToggleShadow onClick={() => (this.toggleShadow)}/>
1 Like
6

Thank you I just fixed my pen.