Click Event in React

Bharathiraja
May 13 · 2 min read

Create a function and bind it with button click in React.

In this tutorial, we are going to learn, how to do the click event using React. Previously I had written an article about “How to Create Your First React Project”. We can do the click event using the onClick property of JSX.

Simple Button Click:

First, create a simple function in the App.js like below.

  1. The simpleClick() is the function and it is an arrow function.
  2. We can use let, var, const in the arrow function prefix. The const is preferred by many developers.

Now bind the function to a button using the onClick property.

  1. Use a single curly brace to bind the function with the onClick property.
  2. No need to use the parenthesis for the function in the onClick property. Parenthesis are needed only if we had parameter for a function.

Save the above code and click the button. It will print the

“simple click event”

as output in the console of your browser.

Pass Parameter to Function While Clicking:

Calling a function with parameters is not a simple and straightforward task in React. That’s why I created this section. To pass a parameter to a function in the click event, we have to use the anonymous function.

Create a function with a parameter in the App.js file like below.

Now bind the created function with a button click event using the anonymous function like below.

Call the anotherClick() function inside the anonymous function.

React is a little bit different in this click event when compared to Angular and Vue. In Angular and Vue, there is no need for an anonymous function to call a function with a parameter.

Pass Event Object to Function While Clicking:

The event object is very popular in JavaScript. You may see the syntax like below in many JavaScript libraries and frameworks.

$e
$event
event

In React we simply use the keyword “e” to use the event object. Create a function with an event object like below.

Binding the function with click events is very easy. Why because the event object “e” is not considered as a parameter. So we can call it simply with onClick property like below.

Pass Event Object to Function With Parameter While Clicking:

In function, with parameter, pass the event object after the parameter like below.

To bind this parameterized function with the click event, use the event object “e” in the anonymous function like below.

Summary:

In this tutorial, you learned how to bind the click event with functions using different types. It is a second tutorial in the React tutorial series. Stay tuned for more articles.

Thank you for reading.

Ampersand Academy

Ampersand Academy offers classroom & online training for…

Bharathiraja

Written by

Deep&Machine Learning, Ionic, Full Stack Developer. https://ampersandacademy.com/tutorials/ https://github.com/bharathirajatut

Ampersand Academy

Ampersand Academy offers classroom & online training for Data Analytics using SAS, R & Python, Data Science using R & Python, Deep Learning, Ionic, & Tableau. We also offer free tutorials and plugins. Write for us. Mail your article link to bharathirajatut@gmail.com

Bharathiraja

Written by

Deep&Machine Learning, Ionic, Full Stack Developer. https://ampersandacademy.com/tutorials/ https://github.com/bharathirajatut

Ampersand Academy

Ampersand Academy offers classroom & online training for Data Analytics using SAS, R & Python, Data Science using R & Python, Deep Learning, Ionic, & Tableau. We also offer free tutorials and plugins. Write for us. Mail your article link to bharathirajatut@gmail.com

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store