React: Introduction to Event Handling
React: Introduction to Event Handling

This course teaches you how to implement event handlers in your JSX when working with React. Event handlers are functions that are triggered in response to certain events that occur in the browser.

Learning Objectives

  • Discover how to create an event handler function
  • Work out how to bind click events to UI elements using the onClick Prop
  • Learn how to reference an event handler function inside of onClick props

Intended Audience

  • This course is intended for anyone who wants to learn about React


  • A basic understanding of JavaScript

React, Introduction to Event Handling. My name is Farish Kashefinejad. I'm the software development domain lead at Cloud Academy. Have any questions or concerns about the content in this video, feel free to reach out to When dealing with a website, regardless of the purpose of that website, typically there is some form of interaction. React lets you add event handlers to your GSX that will be triggered in response to an interaction such as clicking on a button. On the screen, I have the Cloud Academy lab environment open on the left and the React development web server in the browser to the right. Currently I have a rendered list of usernames with each user having a delete atom attached. Now a quick overview of the code on the screen. For demonstration purposes, there is a user object that is being passed through the prompts. The ID and username are being destructured from that user object. By the end of the video when the delete button is clicked, the corresponding username and ID will pop up in a browser alert. To begin, I will create an event handler function that will pop up an alert in the browser when the button is clicked.

On the right side you may see an error pop up on the screen, this is due to autosave being enabled. Saving before I complete my code, I will begin by typing in the lab environment cons handleClick equals arrow function and this function will execute an alert button is clicked. So, in React by convention it's common to name event handler functions beginning with the word handle, followed by the name of the event. Now in order to attach the click event to the button I need to use a prop onClick. I will first expand the button element to the next line for better readability and I will write onClick={}handleClick. Quick note onClick is written with camel case in React. Now to test this on the right I will click on some delete buttons and the alerts are popping up at the top of the browser. I don't know if you've noticed this yet, but the way I've written handleClick, there are no parentheses at the end of it. That is because with React, functions passed to event handlers must be passed, not called. So, this is a direct reference to the handleClick function. Why must the event handler function be referenced but not called?

Let's investigate. I will add parentheses to the end of the event handler function and reload the dev server. Now, when the page reloads, the alert is triggered automatically. When React renders the page, it fires the function immediately during rendering. This is because JavaScript inside of JSX executes right away. I will now remove the parentheses from handleClick. Now what if I don't want to create the event handler function, but instead use enlighten code inside of the onClick prop? I will copy the alert from inside of the handleClick function and replace the handleClick reference with that alert. Now the reactive server has reloaded and the alert is immediately executed. And this is a result of the same problem that happened earlier. When React renders the page, the code is immediately executed. So, what's the solution? If you want to use inlink code or function calls inside of the onClick props, they need to be wrapped inside of an anonymous function and I will go ahead and do that with the alert. Now rather than executing the code inside with every render, this creates another function to be called later.

And now, if I click on the button, this works properly, not causing those rendering issues where the function is executed immediately. This also resolves that issue when writing handleClick with the parentheses. If I replace the alert with handleClick function call, everything still works properly as I will demonstrate by clicking on the buttons to the right. Okay, now I'm going to revert this back to the handleClick reference. And now I'm going to demonstrate how each event has access to its own corresponding props. Up above I have the ID and username values that are destructured from the user prop. I'm going to change the alert from the current string to a template literal with the username and ID. On the right I'm going to click a few times on different delete buttons. Each alert is showing the correct corresponding username and ID and that's it. Thanks for watching @cloudacademy.

About the Author
Learning Paths

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.