# React ES6 - this error

**URL:** <https://forum.freecodecamp.org/t/react-es6-this-error/128638>\
**Category:** General\
**Tags:** react\
**Created:** [June 18, 2017, 1:34am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638 "2017-06-18T01:34:32Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TheBest101](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thebest101/32/32090_2.png) [@TheBest101](https://forum.freecodecamp.org/u/TheBest101)\
**Post date:** [June 18, 2017, 1:34am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/1 "2017-06-18T01:34:33Z")

</div>

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](https://codepen.io/TheMacUser1/pen/dRNpwb?editors=0011)

Edit: The function is called but this is undefined

---

<div class="post-metadata">

**Author:** ![abdellah-el-mennani](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/abdellah-el-mennani/32/57582_2.png) [@abdellah-el-mennani](https://forum.freecodecamp.org/u/abdellah-el-mennani)\
**Post date:** [June 18, 2017, 2:32am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/2 "2017-06-18T02:32:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![r1chard5mith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r1chard5mith/32/160542_2.png) [@r1chard5mith](https://forum.freecodecamp.org/u/r1chard5mith)\
**Post date:** [June 18, 2017, 2:42am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/3 "2017-06-18T02:42:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TheBest101](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thebest101/32/32090_2.png) [@TheBest101](https://forum.freecodecamp.org/u/TheBest101)\
**Post date:** [June 18, 2017, 11:31am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/4 "2017-06-18T11:31:48Z")

</div>

The function is called just that this is undefined

---

<div class="post-metadata">

**Author:** ![r1chard5mith](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/r1chard5mith/32/160542_2.png) [@r1chard5mith](https://forum.freecodecamp.org/u/r1chard5mith)\
**Post date:** [June 19, 2017, 12:54am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/5 "2017-06-19T00:54:15Z")

</div>

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)}/>

```

---

<div class="post-metadata">

**Author:** ![TheBest101](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/thebest101/32/32090_2.png) [@TheBest101](https://forum.freecodecamp.org/u/TheBest101)\
**Post date:** [June 19, 2017, 1:06am UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/6 "2017-06-19T01:06:05Z")

</div>

Thank you I just fixed my pen.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:55pm UTC](https://forum.freecodecamp.org/t/react-es6-this-error/128638/7 "2021-01-17T20:55:36Z")

</div>

Closed on January 17, 2021, 8:55pm UTC