All language subtitles for 013 Handling Events_en

So let's now make sure we can listen

to a click on this delete button.

In Vanilla JavaScript, so in just JavaScript without React,

we would find a way of selecting this button

for example, with document query selector button

and then once we got hold of this DOM object,

we could add a click listener with, "Add event listener."

Now this is, again, an imperative approach.

We describe what should happen.

With React, we rather use a declarative approach

describing the target result.

And hence, this is not code we write and React.

Instead with React, if we wanna listen to a click

on this button, we add an extra attribute on this button.

And for this, it's important to understand

that all these default HTML elements

are, in the end, all the just React components,

just React components that are built into React already.

So they look like regular HTML elements and you use them

like regular HTML elements but under the hood,

these are components.

And that matters because that means that you can add

certain attributes which you could not add like this

at least with just HTML.

For example, on a button or actually on any HTML element

here in JSX, you can add a on click attribute

written like this, lower case o, upper case C,

and the casing does matter unlike in regular HTML.

Here, it does matter.

Now when you add the on click prop as it's called,

as you learned, to a button or to any other element,

you're telling React that you wanna react to a click

on that element.

Now, the value you assign for this attribute

is then not some text, not a string,

but instead a dynamic expression

which should hold a function that should be executed

when a click occurs.

So here, we could define an anonymous inline function

like this or also with the arrow function syntax

which you can use in Modern JavaScript

or you point at another function and I'll do the latter.

I'll create a new function and important, I'll create it

as a nested function inside of the to do function.

And that might look weird

but that's actually standard JavaScript.

In JavaScript, also without React, you can define functions

inside of functions.

So here, I'll add a function inside of the to do function

inside of that to do function component

and we could name this, "Delete handler."

The function name is totally up to you.

I personally like this convention where functions,

which are executed upon events, and with handler

but other people don't use that,

but instead might use, "Handle delete" or just "Delete."

Totally up to you, I'll go with, "Delete handler" here.

And then point at this function as a value here

for this on click prop

simply by repeating the function name here.

And now here is an extremely important thing

to keep in mind.

You don't execute the function here so no parenthesis.

If you would execute it here,

this function would be executed

as soon as JavaScript and React evaluates this code.

So when this line of code is evaluated,

the function would execute.

Now that is too early though.

We wanna execute the function when the button is clicked,

not when that code is evaluated by JavaScript

because that happens right before

that content is rendered in the browser.

Hence, we just point at this function

by just using its name here and that just tells React

in the end that it's this function that should be executed

when this element is clicked.

And now in here, we can do whatever we want.

For example, we can console log clicked here for the moment

and if we do that and save this,

if I go to the JavaScript console in the diff tools,

if we click one of these delete buttons,

doesn't matter which one you click, you see, "Clicked!"

Now we could all the output, clicked

and then as an extra log, "Props.text"

so that text value which we receive via props

which has all the output down there in the h2 tag.

I'm now referring to it again here

because this is just standard JavaScript in the end

even though this JSX code definitely doesn't look like it.

But up here, we write standard JavaScript

and hence, of course,

here we can also use one of our arguments

and if that argument turns out to be an object,

which props is, we can also drill into that object here.

With that, if I save this and click, "Delete",

you see the proper text being output here as well.

And maybe it's not clear here

but that's another strength of React.

Without any extra work from our side,

these three different buttons are doing different things.

I mean, they're always doing the same thing.

We just defined this logic once,

but the concrete values with which they work,

the concrete text which they output,

is not the same.

Instead, it's different for every button.

And that means that we can easily write logic

that's specific to a specific to do,

whilst still being able to define this logic once

instead of three times which is great

and makes our code way more reusable.

But of course here, the goal is not to log something

to the console.

Instead, we wanna show a little overlay

when that button is clicked and for this, of course,

we need to first of all create that overlay.

We need to create the HTML code that should be showing up

and then as a second step,

we also need to find a way of showing it conditionally.