How to pass values to the onClick function in React

We may need to pass additional parameters into the method when we are binding the event handler in React. So in this article, we will show you how to pass the values in the onClick function in React. In other words, we can tell how to pass events and parameters together in function.

Ways to pass values to the onClick function in React

  1. Bind method parameters
  2. Using inline Arrow method
  3. Pass values through data attributes

1. Bind method parameters

During the binding of the method, we’ll send the parameters here.

ES5:

ES6:

2. Using inline Arrow method

Using the inline arrow method, we can pass the event and parameters together in a single function.

3. Pass values through data attributes

The custom data attribute, which is accessible in React 16 and later versions, can be used instead of inline functions.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! ๐Ÿ™‚

If you found value in this article,
you can support us by buying me a coffee! โ˜•

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *