Okeydokey so we have a much better looking list items right now.
The whole list the book lists with some nice photos with some nice titles as well as with an awesome
author.
Why don't we talk about the events in JavaScript now how we can handle them.
Because at the moment the only thing we have been doing dynamically in fact is been rendering the list
as well as working with the props.
But obviously the whole point of javascript is that this allows the user to really really interact with
the page.
So let's just throw an ad for this will first going to create some dumb button.
So I'm gonna say Here whatever within the dev there is gonna be a button.
Now we can set maybe a type and for the type we're going to say had an ad count or I'm sorry not for
the type we're going to add button but within the button let's just say has come and this is gonna make
sense a little bit later on as we're going to be working on this that state.
But for now legislators like this and that now we need to decide how we're gonna be interacting with
this button because our state at the moment I can click all day long and nothing is going to happen.
And you know what.
Since we were all going to be using the console might as well open it right now and I'm gonna look for
the console and you're obviously is gonna be my console.
Knock it fine.
Where are we going from now.
Well I would like to set up here a method where the difference right now is gonna be that this is not
going to be some kind of method that we had already from react.
Like for example what we have.
Well we had the render method right.
And then also we have the constructor method.
In this case we're going to create our own method.
So I'm going to say let's say handle click and that's gonna be my name.
And here I can just write and this would be the method.
Again I do need to follow the syntax but this is the method that we are creating our.
And here I'm going to say don't know console log I guess.
So at the moment over a console log or in the moment we're going to click the button we're going to
console log.
I'm not gonna say you click me something like this again we say it now nothing is happening because
we need to somehow connect them both.
We have the handle of click and then we have our.
And the way we do that we work with the event handlers that react provide.
And there's many of them and we're not gonna cover them all the way we're gonna do that as we're gonna
be working with our project as we're all gonna be working with our tutorials.
The moment the event handler is gonna come up we're just gonna have it the event and then we're gonna
be working with that particular event.
So in our case this is gonna be on click.
So the moment I click on this button something should happen and here's the kicker.
We are passing here the reference.
This is very important.
So first of all we need to say this and then we're looking for the handle click and this is where you
really need to careful because otherwise if you're gonna pass this there's that and then handle click
and then you're gonna run the function.
And this is not what you would want.
And instead what happens is it right away runs six times where you have you click me and this is not
what we're looking for.
So we're passing here as a reference later on we're gonna be covering what happens as we're passing
here the data.
So then again there's gonna be multiple ways that we can do this.
So in fact we're going to be passing here the arrow function and then the function is gonna be returned
and so on and so forth.
But we're not covering that right now for the simple method.
Please please please one more time please remember that you are working with the reference.
You're not running the function you're referencing this function the moment this is gonna be clicked
then the function is gonna run.
So at the moment I'm going say it.
Then I have my buttons.
And notice as I'm clicking everything is working awesome I'm just having a bunch of click meet.
And actually the more components I have the more buttons I'm gonna have and the more click means.
Eventually I'm gonna get knock.
So at the moment you might be looking at your like how awesome everything is working fine.
However let me give you a mind grenade where you're just gonna be considering that maybe everything
is not working so well as you thought.
So let's say there is a state and for now we can create it as a simple state.
But later on we're gonna have to create a constructor anyway.
But I can tell you right away this is not going to change anything.
It would work exactly the same way for both of them.
Whether we are sitting in constructor war or whether we're sitting here in the simple state and let's
say the count is going to be 1.
OK.
So some kind of variable and we already know that we can access the variable.
So why don't we say like this why are we saying you click me then we'll be number one and then we're
going to be looking for this variable.
So to say this not state and then I'm going to be looking for account and let's see what's going to
happen.
OK.
So the buttons were rendered very successfully.
Great.
Everything's working fine.
But what happens when you click the button.
Well I have a big fan error.
Now you might be asking well why is there.
Because it says here state is undefined.
But I mean we do have the state.
So what is the issue.
Well here's the problem within the US five because at the moment you're not looking at the arrow function
you're looking at the regular function.
Even though this is a method.
What happens is this function creates its own context.
So you need to bind this keyword.
So it would point back to the instance of this class.
Otherwise this is going to be pointing to the actual its own context and then this there is not this
in this function.
So that's why it's saying well you don't have no state what are you talking about.
You want to state.
OK I can get you in the state but I create my own context.
I already have this and this is not work.
So like I said we would need to bind it or create this as an our function.
So why don't we first take a look at how we can find it and then we're gonna set it up as a normal function.
So for us again we have the Constructor that would be the method that is going to run every time we're
gonna instantiate the class.
Then we're also going to have to use the super and they're all gonna write props and this is where we're
gonna be setting up our handle.
So in this case we're gonna do it like this.
When I say this don't.
Then the name of the method that we have and then we're going to be looking for this that handle click
again twice and then we need to bind it and we need to bind it to this.
So in this case what's gonna happen the moment I'm gonna save it.
Check this out.
Now everything is working fine.
Have you clicked me.
And then I have the one because in this case we're binding the context that the handle click has to
the actual class here that we are working.
And again we can do the same thing here.
I can just move it and you'll see that it's still going to work so maybe right after props.
I say again this is the art state and then we're gonna be again using the handle click method.
That would be the basic set.
And that would be one of the ways that we can do.
However if you are turned off by this long syntax and you're like There's no way I'm to remember this
knock I react as a solution for you because again I will repeat myself but there's multiple ways how
we can do it.
So let me comment this out as well as this guy just so you have the future reference.
And why don't we rewrite this.
Why don't we say like this why do we say no click then this is gonna be my error or function somewhere
say something like this then I'm obviously going to have just some kind of implicit return.
And in this case I'm just going to say that there's gonna be some kind of console logs.
So we're gonna write console log on so log and then for this console log why don't we are you know what.
Let's just rewrite a little bit.
Let me write the curly braces because we're gonna have multiple lines.
So might as well do that oh we're gonna write console log console log.
Then we're gonna do the same thing right.
We had console log you click me and that's not what I wanted.
Let me again undo it.
So were you collect me.
That would be one thing and now I'm going to copy and paste it.
And now we can access the state because the difference is that with the arrow functions they are not
creating their own context.
So that is the reason why we don't need to bind anything.
You could just write it here as the handle click and everything is gonna be working fine.
So at the moment I'm gonna save it.
Check this out.
So as I'm clicking everything is working fine.
So we are affecting this thing and this would be in general your two choices your possible choices where
if you want to bind them you can just write it as a he has five or if you don't want to bind them you
can just use the arrow functions and use the syntax and everything is going to be working fine.
Again just remember that you will gonna be passing the reference later on we're gonna look at the other
scenario where we're passing some kind of information.
So this is gonna be changing however for the simple functions you're just passing the reference that's
all and then everything is gonna be working fine depending on which situation you're going to choose
whether you're going to be binding the regular function or you're going to be choosing the arrow function.