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 support@cloudacademy.com. 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.