What is the purpose of doing (bind(this)) while handling the events in React .jst?

Question

(In React Coding) Whenever I click on the screen I would like to compute something by using OnClick event. For that I got a sample code from internet as follows,

<div className="sample" onClick={this.handleClick.bind(this)}>

The handleClick method and <div> resides in the same method. Could anybody explain why binding is required here and why should not we call handleClick() method directly with out binding?

This question has already been asked on SO. https://stackoverflow.com/questions/38624799/why-is-it-necessary-to-use-bind-when-working-with-es6-and-reactjs — Grandas, Jun 30 '17 at 05:26
Possible duplicate of [Why is it necessary to use bind when working with ES6 and ReactJS?](https://stackoverflow.com/questions/38624799/why-is-it-necessary-to-use-bind-when-working-with-es6-and-reactjs) — Mayank Shukla, Jun 30 '17 at 06:10

score 2 · Accepted Answer · answered Jun 30 '17 at 06:25

"this" keyword refers the context of current component (let say Component A) in react. Basically in java-script it refers the current class or function but for react it refers the current component.

If you are not send this with your handleClick method then whenever handleClick method you called then handleClick never know the things(like variables or functions) of component A.

score 1 · Answer 2 · answered Jun 30 '17 at 05:42

In JavaScript there is something called context. It includes whats found in the current scope using the this keyword. So by using bind, you are passing the context where handleClick is called into the function handleClick so that this function can use this.values from the bound context.

More info here.

What is the purpose of doing (bind(this)) while handling the events in React .jst?

2 Answers2