So far we have covered all the essential

concepts for describing the UI

components props JSX conditional

rendering, lists, and styling. We can

build interfaces that display data. But

here's the thing. Our components only

show information. They don't respond

when users interact with them. So let's

talk about handling events. How can we

make React components respond to clicks

hovers, keyboard input, and all the

other ways users interact with our

applications?

For this example, I'll create a new file

called custom button.jsx

within the source folder.

Here, we'll define a simple React

component that displays a button. Export

const custom button is equal to an arrow

function. We will return the button

element with the text like I'll import

and invoke this component in app.jsx

import custom button from dot /custom

button and invoke it at the top. Save

the file check the browser and we see

our button. Right now this button

doesn't do anything when clicked. Let's

fix that. Responding to events in React

is a simple two-step process. First, you

define a function that should be

executed when the event occurs. So

within the custom button component

we'll define a function called handle

click. const handle click is equal to an

arrow function and we alert the text

thanks for liking.

Second, you assign the function to a

special prop that starts with on. For a

click event, we use on click. So on the

button element, the prop is on click. It

is very important to note that the prop

needs to be camelcased. So uppercase the

first letter of the event name. To this

we assign handle click. Now, if you go

back to the browser and click the

button, the handle click function will

run and show the alert. Thanks for

liking. We've handled our click event.

Please note that in React, we typically

name event handlers starting with handle

followed by what they're handling. Since

we're handling the click event, the

function name is handle click. But you

can also write this function in line

with an arrow function. Let me comment

out the function and write it in line.

So on click is equal to an arrow

function where we call alert. Thanks for

liking. Go back to the browser.

And you can see this works too. For

simple stuff, inline can be cleaner, but

for anything more complex, I prefer

separate functions. they're easier to

read and test. I will stick to the

separate function approach for now

because I need to point out something

super important here. See how I wrote on

click is equal to handle click and not

handle click with parenthesis.

This is a common mistake beginners tend

to make when they're first learning

React. If you write handle click with

parenthesis, you're calling the function

immediately when the component renders.

That's not what we want. We want to pass

the function itself so React can call it

later when the user clicks. Let me show

you the difference. If I do this, so

handle click with parenthesis and save

the file and refresh. You can see the

alert shows up immediately when the page

loads and the component renders, not

when you click. That's because we are

calling the function right away and

passing its return value which is

undefined to on click. without

parenthesis. The alert shows up only

when you click. Very important to

remember this. Now, I showed you on

click, but React supports all the events

you're used to from regular JavaScript.

On change for inputs, onsubmit for

forms, on mouse enter for hovering, etc.

They all follow the same naming

convention. Camel case names starting

with on. Finally, let me show you how to

use the event object. Every event

handler receives an event object as its

first parameter. We usually call it E or

event and it contains useful information

about the event itself. For example, we

can log the target element. So clicked

element is event.target.

We can get the click coordinates.

So click coordinates

is event dot client x comma event dot

client y and maybe which mouse button

was used. So console log which mouse

button event dot button head to the

browser open the dev tools panel and

click the like button.

We see the information logged in the

console. Clicked element is the button.

click coordinates for 23 and 40 which

mouse button zero for left click. Now

one thing that might surprise you is

that event handlers have access to all

the components variables and props since

they're defined inside the component. So

we can add a variable called name const

name is equal to code evolution and a

prop called text the structure text. We

can bind this to the button text and the

handler function. So return instead of

hard-coded like as the text, we will

render the text prop. And in the handle

click function, we can log to the

console. Hey, followed by dollar curly

braces and the name you clicked dollar

curly braces text. And we don't need the

event. Back in app.jsx, JSX we can pass

a prop to the custom button component.

Text is equal to like duplicated. Text

is equal to bookmark. Save the files.

Check the browser and we see the two

buttons like and bookmark. Click like.

Hey Code Evolution, you click like.

Click bookmark. Hey Code Evolution, you

click bookmark. We can access local

variables as well as props within our

event handler. Now, that was a lot. So

let me quickly summarize what we've

learned. Handling events in React is all

about passing functions to special props

like on click. Remember to pass the

function, not call it. So, no

parenthesis. Use the event object when

you need info about the event. And

finally, event handlers have access to

all the components variables and props

since they're defined inside the

component. Up next, we will look at a

common pattern you will use when working

with event handlers.