Styjun

I'm working through a react tutorial and the instructor is showing that the event handler in this code won't work, because this() is accessing the outer environment. But I get no error. Can someone explain it to me?

import React, Component from "react";

class Counter extends Component 
 state = 
 count: 0,
 ;

 handleIncrement() 
 console.log(this.state);
 console.log(this.props);
 

 render() 
 return (
 <div>
 <button onClick=this.handleIncrement()>
 Increment
 </button>
 </div>
 );
 


export default Counter;

Any function called directly from render method will get the container object as this
But when we assign a function to onClick event, we don't want to call that function immediately... so we assign it like this

<button onClick=this.handleIncrement>

(only the function name without () at the end) ... and this says to call the function when the button is clicked.

But when you click the button the function will not be called from the render method anymore so the this reference will be changed and produce an error.

In your case, you added the () to your this.handleIncrement function invoking it immediately... so it's not causing any problem but it will give you wrong results in almost all cases since it won't get called on click but it will get called with each render.

Since your simple code gets rendered only on button click it's probably correcting the problem. Add a second button and it will give wrong result or the UI will freeze.

The correct way is to remove the () after this.handleIncreament and bind the function inside constructor ... this.handleIncreament = this.handleIncreament.bind(this)

As Afzal Hossain says, you're invoking this.handleIncrement() when the element renders rather than when the button is clicked.

You need to provide the function handle itself to onClick, and bind() it to the correct context when it is constructed, so that this always accesses the instance of Counter within handleIncrement().

Here is a working implementation of the suggestions made in his answer:

const Component = React;

class Counter extends Component 
 state = count: 0 ;
 handleIncrement = this.handleIncrement.bind(this);

 handleIncrement () 
 const count = this.state;
 this.setState( count: count + 1 );
 

 render () 
 return <label>
 <div>Count this.state.count</div>
 <button onClick=this.handleIncrement>Increment</button>
 </label>;
 


ReactDOM.render(<Counter/>, document.querySelector('main'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<main/>