All language subtitles for 031 Event Basics.en_US

Not bad, not bad.

We now know how we can render list of objects and actually wrap it into our component, but the next

thing that I want to talk about is, of course, events, because everything is nice.

We have our list.

But of course, what makes applications so appealing is the fact that we can start responding to user

events.

So essentially, when the user clicks the button or hovers over the card or whatever.

Now, the problem is that we haven't covered yet the state.

So in our examples or just the old console logs where maybe throw in some alert, essentially this is

just to give you a general idea.

When we cover state, then of course, our examples are going to become more interesting because we

will add some items, will remove some items, we'll toggle some info and all that good stuff.

So this is just to give you a general overview, how the events will work and react.

Now, as a side note, if you would like to see all the events, because in our example, we'll just

take a look at the two hours, just Googling react events and then look for this link, the synthetic

event.

And then if you keep on scrolling numbers in React Docs, you'll find all the possible events that react

supports.

Again, in our example, we'll just take a look at two one on hover and the second one on click, so

I'll never get back to our project.

And we'll work in the book component.

So what do we need in order to set up a vent in react?

First of all, we need to the attribute so right here attribute.

And then the second one is the event handler.

Now, the one thing that is different from the JavaScript is that since we're setting this up in line

again, we need to make sure that we're using the camera cache.

So instead of on click all lowercase like you would normally, right.

As far as line JavaScript, in this case, we need to set this up with a camera case, which would mean

on click on line, like I said in our video, we'll take a look at the on click event on the second

one will be on mouseover.

But I just showed you where you can find rest of the event as well.

Now, the way we set that up, first I'm going to create a button.

Now, technically, you don't have to create a button for the unclick course.

You can attach it to an for one to the whole article if you want.

But just to be more correct, I'm going to add a button so out here type so that it will be a button.

And then like I said, in order to set up a vent, we would need to have the attribute.

And since I would want to listen for clearance, I simply will go with on Click.

And like I just mentioned, we would need to set this up as a camera case.

So on click and then we need to have our handler now all set up multiple examples because we have multiple

options, just so you can see whichever makes more sense to you, so we can set it up as a reference

or we can set it up as a inline function.

How we would set up as a reference.

Well, in here I could come up with a function.

So it's a click and learn.

And then, of course, we are having our function and then we just need to pass it as a reference so

we have Clerck Handler and then we pass it here on Kallick.

So our Klick handler.

Now, what I would want to do over here, well, I could just go simply with alert and her little world

and you'll see that first.

We'll have the button.

But of course I skip the name.

So let me right here reference example and then you'll see that I have a button that is the reference

example.

And the moment you click it, you have the Hello World beautiful.

So we know how we can respond to the first event, the click of it.

So that is going to be a reference example.

But like I just said, we also have an option of sending this up as a inline function.

Now, what that means is that I could simply place my function here instead of setting this up as a

reference.

How is that going to look like?

Well, in this case, I think I'm going to go with having one just so it can spice things up.

Just please keep in mind, of course, as far as accessibility, that is not the best case scenario.

But let's just go with that.

So we'll have unclick then, like I said, click and there will become my inline function.

And in here I simply say that I would like to console log and I just want to showcase that.

Of course, within of this function, I can access my variables, my props, and for the time being,

I'll just go with a title.

So once we click on a title in a console, we should also see the title.

So let's say I'm going to go with console and then once I click on a title N, now I'm getting that

specific title that is displayed.

So for each and every book, of course title is unique.

And then once we click on the title, then of course we can see it in a console log.

Please keep in mind that both of them are doing the same thing right now, OK?

In one case, we have the inline function that has the functionality and in the second case we have

the reference.

So now we're referencing the function and again, we have some kind of functionality so you can choose

whichever option makes sense to you.

Now, the Gocha is going to be when we would want to pass some kind of value.

So this is going to be later on where, for example, we would want to delete the item for the list.

We would need to pass the actual ID so we know which item to delete.

So again, in this case, we won't delete the item from the list or we'll take a look at what happens

if we are passing in that item, because this is going to be a gotcha.

So in here, I'll set up another button and I'll say again, type is equal to a button and then we'll

have it on click for time being.

We'll just leave it empty and also say more complex.

A sample.

All right, good.

So what if I would have a function and I'll call this const and complex example.

And then again, we're setting up our function.

And in this function, I will get the author.

I can get the idea, I can get the title, I can even get the image if I want.

But let's just imagine that I would want to log this author each and every time when I look at.

OK, now what's important, though, is that this will be passed dynamically.

It's not like in here where I have a login and I'm just accessing the title.

We need to imagine that in this function, in the complex example, I'm looking for that as an argument.

So say here that I will pass in the author.

Now you'll notice that if I just run my complex example and if I pass in the author, well, yeah,

technically it will work, but it will work the moment I render my application.

So the moment I render notice, I run all three of them.

So I have all three of us over here.

So why do you think is that happening?

Well, because here notice I invoke this function.

I invoke at the moment I run my application and that is now what I'm looking for.

Of course, what I would want is run it only once I click it.

So here's the thing.

If you have this kind of situation where you must pass the argument into the function, you'll have

to first set up a function.

So here we'll start with an end line and then we can either set up the curly braces if we want.

That's definitely an option.

Or we can.

Simply say, not once I click, then I would want to run the function again, that is going to be the

case if you must pass this into as an argument.

And again, this is going to be for more complex scenarios where we'll start passing data, for example,

to the database or will be removing items.

Again, this is not going to be just one simple concept.

Of course, at the moment, you can just simply argue, well, I would write it as an inline function.

There's going to be cases where you cannot do that.

That's why, of course, I'm showing you this.

So now, of course, what happens once I click on more complex example, only then I run it because

we need to understand that once we start up the application, we run our function or our function.

And then, of course, we return the complex example.

And only then once we're connected, then we invoke our complex example.

Also, I would like to mention that in all the functions, in all our event handlers, we can access

the event object.

In this case, I'll just show you with one with a click handler.

Just please understand, of course, you can access in all of them where essentially we have our event

object and we can do things.

We can control the event and also, for example, go for event target.

That's probably going to be the most useful scenario because normally you'll use this.

We input a lot where we'll be looking for the name will be looking for the value and all the good stuff

for the button.

We'll just take a look at what we're clicking on.

So remember, that was the first one.

So once I click on this, I have my work that is beautiful and then I have my whole big event.

So, of course, we can find a bunch of useful info here.

But also I have what I'm clicking on.

So that is my target.

This is something that we will use quite often, especially once we start working with the input.

And the second event, I would want to take a look at it on mouseover, which essentially occurs when

the mouse pointer is moved on to a element.

So I can set this up anywhere I would like, but I think I'm going to go with an article just to make

it interesting.

So first, I'm looking for my attribute.

I'm looking for mouse over.

And then again, we have the handler.

Now, in this case, I'll pass this as in one hour instead of just implicit Latrun like we had before.

Now, of course, notice I'm setting up the curly braces and again, I will do some kind of functionality

over here.

This is just the showcase that regardless whether you go with implicit return or you're setting up the

curly braces, it will work.

So we have our own mouse over beautiful.

And we're going to go with some kind of function.

And I don't know, I'm just going to go with a log and I would like a log.

I guess we have been logging the author.

Why don't we cancel log the title?

Because we can still access that specific title for each and every component.

So now what happens as I hover over it the moment my mouse moves on to the element?

Now, of course, I'm going to logging the title of the book.

So each and every time I do that, notice how I increase the amount in a console.

So if I'll move my mouse onto a different kind, of course I will console log that particular title.

So that's how we can work with events.

So essentially those are the basics of how we can listen for events in react.