Sorry for the confusing title; if I have an onClick attribute on one of my ponents such as the following

<Component onClick={this.doSomething()} />

I will often get weird errors depending on what the doSomething() function is actually calling. If doSomething() is changing state particularly I get all sorts of render errors. On the other hand if I do this

var _this = this;
<Component onClick{
   function(){
      _this.doSomething()
   }
} />

All the errors go away and everything works as I intended. What exactly am I doing by wrapping my onClick attribute in an anonymous function that makes this work? Is there a better way of doing what I am trying to do?

Sorry for the confusing title; if I have an onClick attribute on one of my ponents such as the following

<Component onClick={this.doSomething()} />

I will often get weird errors depending on what the doSomething() function is actually calling. If doSomething() is changing state particularly I get all sorts of render errors. On the other hand if I do this

var _this = this;
<Component onClick{
   function(){
      _this.doSomething()
   }
} />

All the errors go away and everything works as I intended. What exactly am I doing by wrapping my onClick attribute in an anonymous function that makes this work? Is there a better way of doing what I am trying to do?

• javascript
• reactjs
• anonymous-function
• jsx

• You can do onClick={ _this.doSomething } – Rajesh Commented Jul 5, 2016 at 13:19
• 2 @Rajesh Not always. There's a good chance you'll need this.doSomething.bind(this) too. – Ben Fortune Commented Jul 5, 2016 at 13:20
• @BenFortune Yes you are right. We might have to do that. – Rajesh Commented Jul 5, 2016 at 13:21
• I found this weird too that you have to define "_this" to be "this". Probably because in function(){}, it is another context where "this" points to the new context. However, as you define "_this" to be "this" outside the function(), then you can preserve the context outside function() by using "_this". – Kiwi Commented Jul 5, 2016 at 13:25
• @BenFortune a question, if I'm doing _this.doSomething, will react not associate this to _this? – Rajesh Commented Jul 5, 2016 at 13:32

1 Answer 1

If you do this:

<Component onClick={this.doSomething()} />

Then you're calling the function and assigning the return value to the onClick attribute. If this.doSomething() modifies the ponent state during a render, then this will cause problems.

You should be able to use:

<Component onClick={this.doSomething} /> 

i.e. remove the (), so the function is assigned to the attribute, rather than the result of executing the function.

In the constructor of your ponent class, you should include the following line:

this.doSomething = this.doSomething.bind(this);

You can use onClick={this.doSomething.bind(this)} too but this means that a new function is created every time the ponent is re-rendered.

The binding behaviour of this within a ponent class varies, depending on how the ponent is created:

• Using the class keyword (ES6), this is not automatically bound
• Using React.createClass, this is bound

With ES7, you also have a couple more options:

• Using doSomething = () => { //... instead of the function keyword
• Using onClick={::this.doSomething}, a shorthand way to bind this

Thanks to Zequez for their useful ment.