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? — jonrsharpe
– jonrsharpe, Commented Aug 23, 2021 at 8:52

Sinan Yaman · Accepted Answer · 2021-08-23 08:52:55Z

1

() => 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}

answered Aug 23, 2021 at 8:52

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1