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.