I am creating a button with onClick method.
What is the difference between
onClick={() => this.props.onCalculateButtonClick()}
and
onClick={this.props.onNumerialButtonClick}
?
both methods work
See the third paragraph of this answer:
The first onClick that you show passes the reference to an anonymous function () => {};
When this function is called it will be processed like any other function by doing the things inside of it. In this case, this.props.onCalculateButtonClick().
The second onClick you show passes the reference to the this.props.onNumerialButtonClick function.
Why would you want to do the first one? Because this way you can make more things happen in the onClick event without editing the function you call inside of the anonymous function. You can also pass in the click event to the anonymous function. Here’s an example:
onClick={ (e) => let value = e.value; value += 'editing the value'; this.props.doSomethingWithEditedValue(value); }
This is not necessarily best practice but it gives you an example of what you can do. People will commonly call the preventDefault() function of the passed in event before calling whatever function they want to call, for example.
Hope this helps a little!
1 Like