Original subtitles

So this is our demo application

at the moment, and, of course, it's fairly static.

We have this output here on the screen,

and we reached that output with help of our components.

But as I mentioned, this never changes, it's static.

We only have one state in this application,

and that's this initial state which we see here.

Now, let's dive into how we can react to user events

before we then have a look how such events

could trigger a state change.

And when we wanna start with events,

I wanna start fairly simple.

I wanna start with clicks on a button

to which you wanna react.

And to get started with all of that,

I'll go to the ExpenseItem,

where we output the title, the amount, and so on.

And in there, I will also add a button below that div

right before we close the card.

And there, I will just say Change Title.

And if we now save that, we will see this button here.

Now the styling is definitely not great,

but this is also just a temporary button.

We're going to remove it later.

I'm just using it here

so that we can start diving into events and state.

Later we'll use what we learned in better places,

in places that really help our application.

But for a start, we now have these buttons,

one per expense item component.

And my goal now is simple.

When this button here is clicked,

I wanna change the title which is being output here.

Initially, the title which is being output

is the title we get via props.

But I wanna change it whenever this button is clicked.

And therefore, we, of course, first of all,

need to find out how exactly we can react

to button clicks in React.

And it turns out that this is rather simple.

On all built-in HTML elements, like divs and h2,

and especially all the buttons and so on,

we have full access to all these native DOM events

which we can listen to.

So if you search for HTML button element, for example,

you'll find an article about this button.

And there, if you click on the DOM Interface here,

this HTML button element, you see from which other elements

or from whichever classes this inherits in the end.

And here you see that the HTML button element

is a more specific form of the HTML element,

which is a more specific form of the element,

which is a more specific form of the node and so on.

And if we click on Element, for example,

we actually will see that there are a bunch of events

to which we can listen, for example, click and blur.

And basically, for all these default events,

there is a prop equivalent in React,

which we can add to these built-in HTML elements

to listen to these events.

So instead of adding a listener as we would normally do it,

by for example selecting an element by ID

and then adding an event listener like this,

which would be the imperative way of doing that,

in React, we add an event listener

by going to the JSX element, like this button.

And there we add a special prop.

But now it's not a prop which sets some value

for this button, but instead it's a prop which starts

with on.

Because React exposes all these default events

as props which start with on.

And for example, here we can add onClick.

Now, what this does is it adds an event listener

for click events to this button.

Now we just need to define what should happen

when such a click occurs.

And we do that by assigning a value

to this click event.

And the value here, and that's now important,

of course, has to be code

which should be executed when that click occurs.

And how do we define codes that should eventually

be executed in programming?

Well, we create a function.

So all these on props,

all these event handler props, want a function

as a value, a function passed as a value for onClick

and all these other on props

which then is executed when that event occurs.

Now, here, we can either create this function on the fly.

For example, like this,

we can create an anonymous arrow function like this.

And then here we could console log Clicked,

if we wanted to.

And if we save that and we go back

and open the developer tools here in the browser,

and there we go to the console part,

if I click the title, we see clicked.

So this is how that works.

This is how simple it is to add an event listener

to a React element.

Now, typically, you don't just wanna work

with such anonymous inline arrow functions though.

By the way, it doesn't have to be an arrow function.

You could also create a function with the function keyword.

You don't wanna overdo it at least.

Because it would mean that you put a lot of code here

into your JSX block, into your JSX code,

and that's generally not a good idea.

You wanna keep that lean

and not put too much logic into your JSX code.

Instead, you typically wanna define a function

before you return.

And you can do that either with the function keyword

or, again, by creating a const or a variable

which holds an arrow function.

So here we could add a clickHandler const,

the name is up to you, which holds an arrow function,

like this, and in there, I can also say Clicked

with a couple of exclamation marks.

And then here, for this button,

we just point at clickHandler.

And that's important, by the way, we just point at it.

We don't execute it here.

You don't add parentheses here.

Instead, you just repeat the name of the function.

No matter if you created that function like this

or with the function keyword, this does not matter.

No matter how you defined it,

you just point at it like this.

Why?

Because if you would add parentheses here,

JavaScript would execute this

when this line of code is being parsed.

And this line of code is being parsed

when the JSX code is returned.

So it's then not executing clickHandler

when the click occurs but when this JSX code is evaluated,

and that would be too early.

That's why instead we just point at the clickHandler.

We just point at the function.

We pass a pointer at this function as a value to onClick,

and then React basically memorizes this

and executes the function for us whenever the click occurs

so that it's not executed when this is evaluated

but when the click occurs, which is exactly what we want.

So now when I save that and I reload here,

you'll see now we have clicked

with multiple exclamation marks,

which is the console log from this const.

And that is how we can add event listeners to our elements.

To all these built-in HTML elements,

we can add supported event listeners basically.

OnClick, for example, basically is available

on every element.

Some events are only available on specific elements.

But that is all based on the default DOM behavior.

If an element supports an event, then you can add a listener

with React by adding such an on

and then the event name prop.

Just make sure that the event name

starts with a capital character,

like in the case of onClick here.

And then you just point at a function,

either defined in line here or, better, defined upfront,

and React will execute that function for you

when that event occurs.

That's how you add events.

Now, one word about naming these functions.

It is a convention which you don't have to follow

but which you might consider following

that you name your functions like this.

If they are triggered upon an event,

that you end with handler.

This is not a must-do,

and not every React developer does it,

but it is a preference I personally have.

And you will see it in a couple of projects out there

so that it's clear that this is a function

which is not called by us, somewhere else in our code,

but that it is a function which we attached

to an event listener so that it's eventually called

by React when that event occurs.

That's why I'm naming my event handler functions like this,

ending with handler.

But again, this is just my preference.

You see it in a couple of projects.

You might wanna consider doing that,

but you don't have to.

But now with that, we know how we can react to events.

How can we now change

what is showing up on the screen though?