In React, why do we call this in arrow function?

Question

I have a question.. please let me know..

import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);
  }

  handleClick = () => {
     console.log("clicking")
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.letters.map((letter) => (
            <li  onClick={() => this.handleClick()}> // when clicking li, it works.
            <li  onClick={() => handleClick()}> // when clicking li, it does not works why????
              hello
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

This is very simple code.

My question is why we do write like this.handleClick ??

In my thinking,

• When clicking li tag.
• this.handleClick function is in arrow function!!
• so, arrow function binds this automatically
• (in this case, this is bound to App component)
• therefore, in arrow function, just handleClick can be found, (// in my thinking)
• Because this.handleClick can be found!
• But, just writing handleClick is not worked.. ? why ?? // handleClick does not found error...

Can you explain why this happen?

Additionally..

if I changed code like <li onClick={() => console.log(this)} />

We can see this is App component. Also in App component, we can see handleClick function...

So, this is bounded to App Component, and then I think in arrow function, handleClick() function can be found. but does not find... why??

Answer 1

You appear to be confusing what it means for arrow functions to, in your words "bind this automatically". Technically, that's not what's happening. See the MDN article: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

They don't automatically bind this, they simply don't create a new this binding (in contrast with functions, which inherently create a new this binding). While you could think of it is "automatically" binding this, that's not really what is going on. A key point though is that it only affects what this means within the scope of the arrow function. It has no bearing on what this it outside of the function. So the fact that you defined handledClick as an arrow function has no bearing on whether you can use this to access it or not. It only affects what this refers to within the function itself.

All of that explains why calling this.handleClick would be expected to work in your render, but trying to call handleClick would not. There is no function handleClick in scope of render. There is a this (the instance of your component), which does happen to have a handleClick method.

Using arrow functions in this context is useful because you don't have to re-bind it. If your handleClick function needed to access this.state or this.props, it would be able to. If you defined it as a standard function, you would need to re-bind it, so that the correct this would be available when it is called.

As others have pointed out though, your code as-is probably doesn't work either way not. You should drop the arrow function wrapping them. As is, you are simply calling a function that returns the handleClick function, not calling it.