Odtnhj

I know about "this" binding and all other stuff here, except one thing. I can't understand how "this" is not undefined in the first call, but second?

P.S. I know about function reference and that in the first case it's executing function but in the second case returning reference.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component 
 constructor() 
 super();
 this.name = "MyComponent";
 // this.handleClick = this.handleClick.bind(this);
 

 handleClick() 
 console.log(this);
 console.log(this.name);
 

 render() 
 return (
 <div>
 <button onClick=this.handleClick()>click 1</button>
 <button onClick=this.handleClick>click 2</button>
 </div>
 );
 


const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the first line

<button onClick=this.handleClick()>click 1</button>

this.handleClick() will be executed in the render function of App component (which is a class by itself) while the component is being rendered in virtual DOM. So by the time of execution, handleClick function will be defined in the execution context which is App class.

In the second line

<button onClick=this.handleClick>click 1</button>

this.handleClick is attached to the DOM and will execute from the DOM's context when click event happens and the execution will look for handleClick in the DOM's context and will be undefined.

There are two ways to circumvent this

1. bind the method to the class as you did.




2. Pass in an anonymous function which will execute without DOM's context and by default be bound to invoker's context.

like this

<button onClick=(e) => this.handleClick(e)>click 1</button>