0

I realize this may be a stupid question but I haven't been able to find an explicit explanation anywhere. In my case, I have 2 React components.
Say my main component has a method called doSomethingOnClick(). Now I am calling another component and passing it a prop by calling this method. My question is why do I need to do: 

<Component someprop= {(arg) => this.doSomethingOnClick(arg)}

Why can;t I do this instead ? 

<Component someprop= {this.doSomethingOnClick(arg)}

Even in the component which receives this prop makes use of a similar syntax. So why do I do 

someprop = {(arg) => props.doSomethingOnClick(arg)}

instead of 

someprop = {props.doSomethingOnClick(arg)}

The way I understand it is the same method is being called with the same argument leading to the same result. (I hope) Is this something that the syntax simply demands and must be done or is there some special reason for this ?

Harsha Limaye
  • 915
  • 9
  • 29
  • 1
    It's to ensure that the calling context (the `this`) inside the callback (eg, `doSomethingOnClick`) is the instance. If the callback isn't using `this`, then it doesn't serve a purpose. You can also achieve it by binding the method to `this` in the constructor, or using class field syntax. – CertainPerformance Jan 02 '20 at 07:21
  • 1
    If you use `someprop= {this.doSomethingOnClick}` rather than a function that calls `doSomethingOnClick` *and* you don't bind in the constructor *and* you don't use class fields for the method *and* you reference `this` inside the callback, you'll run into errors. – CertainPerformance Jan 02 '20 at 07:23
  • I'm afraid I do not understand...Why does it not serve a purpose ? If i bind the function and use it in the same class, will I still have to use the arrow function in the second component which used the same method ? – Harsha Limaye Jan 02 '20 at 07:23
  • 1
    No - if you use *any* one of those techniques, you won't have to use any of the others, because the `this` inside the method will be correct (or not needed). – CertainPerformance Jan 02 '20 at 07:24
  • okay so the only point is that 'this' doesnt work well with arrow functions. So if i bind the method in the constructor I can directly use this.method and props.method in both the same class and some other class to which it has been passed correct ? – Harsha Limaye Jan 02 '20 at 07:26
  • 2
    Not exactly, it's that `this` with anything *but* an arrow function is based on calling context, rather than being lexically inherited from the outer scope - and by default, the calling context for an event handler will be `window`. It's not a React thing, it's a DOM thing – CertainPerformance Jan 02 '20 at 07:28
  • What documentation do I need to read to get an understanding of events and methods used to handle them ? – Harsha Limaye Jan 02 '20 at 07:32
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205205/discussion-between-harsh-limaye-and-certainperformance). – Harsha Limaye Jan 02 '20 at 07:34
  • If you already have a named function/method I personally prefer to do: `someprop= {this.doSomethingOnClick.bind(this)}` or if it's a pure function (not a method): `someprop= {doSomethingOnClick}` – slebetman Jan 02 '20 at 07:40
  • @HarshLimaye It depends on where exactly are you using the Arrow function. If the Arrow function is used in the render method, then they create a new instance every time render is called just like how bind would work. – Govind Soni Jan 02 '20 at 09:17

0 Answers0