Arrow function vs regular function while handling events in ReactJS

Question

Kindly correct me if I'm wrong.

() => this.handleClick()

is same as

function callHandleClick(){

return this.handleClick()

}

But the below works.

<input type="submit" onClick={ () => this.handleClick() }/>

But, this doesn't

<input type="submit" onClick={function callHandleClick(){return this.handleClick()}}/>

I have defined the handleClick method. Is it possible to use a normal function instead of arrow function to handle the click event?

Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — jonrsharpe, Aug 23 '21 at 08:52

score 1 · Answer 1 · answered Aug 23 '21 at 08:52

() => this.handleClick()

is not the same as

function callHandleClick(){
  return this.handleClick()
}

The equivalent for that would be:

const callHandleClick = () => this.handleClick()

Therefore, you are defining a function inside the handleClick. Instead define it outside and pass it like:

onClick={callHandleClick}

1 Answers1