Welcome back in this lesson and we got to recall the events in Reetta, Jace, this is our projects.
We have reactor projects and we are using the basic project.
This is our project.
And let us tap this command line, KDDI Basic.
I'm not clear, and I'm going to run MPM ducts in order to run my projects on Prasert.
OK.
Very good.
And what's he going to do here?
We are going to create a new tone, a chance here before our table and in order to start with our lesson
about the events.
OK, so I'm going to advise you to commence the clock and there are reports on.
So we're going to leave only this table.
So what's regular do?
Re going to come in our room, my car's dot javascript dot days.
And just in the beginning, before starting with our table take, we are going to create a new box on
your.
We're going to create a new button like this, and here inside we are going to say.
Plus price.
OK, so it is Zais.
Once you click, for example, on this button, the desire is to increase a these different prices that
we have here in our table.
For example, I click on Plus Price and it is easy to see its price to be increased.
Okay, so this is what's really going to do.
So let us begin our second.
The thing we're going to do, we're going to record the events, listen, OK, even listen and hear,
I'm going to say, for example, I'm going to call these attributes the Texas it's boots on Cleek.
Like, do not forget to put the first letter of the last words in Upper Keys.
OK, I'm going to say on Gleek and here I'm going to put my Hybris here.
I'm going to say for his import alerts like.
I'm going to say.
The price.
OK, I'm going to say freezing example, the price is.
Increased like this, and if I try to make here you're going to see this alert, Borse will be launched
when your pitch is reloaded just in the beginning.
OK, as you can see, if you try to reload your page, you are going to court directly the Alaric's
box.
OK, so we don't want this.
The desire is once you click on plus price is to see the ballot both.
And we don't want to see this Arlette's box.
And every time you reload, for example.
OK, so we don't want this is to click on this button and see the ballot box.
What you must to do, you must to integrate your air function in instead of your attributes.
So you're going to call your error function, zhorov function, what you call your gyro function, your
your function.
And it will work.
If I tried back here and once a reload speeds, you're going to see a I don't have any more alerts books.
OK, and if I want to display this hour, it's both.
I need to click on this button once I click, you can see I have the price is increased.
I can click on this, but I have the price is increased.
So make sure to do like this to put your error function in instead of your attributes.
Otherwise, you can create, for example, a function outside your render function.
I can say, for example, here, I'm going to say increase.
I'm going to say freezing increase price.
They can increase the price, I'm going to call, for example, a simple function like in Nonracist
six function is a simple function.
And I'm going to take these alerts.
I'm going to pass this just inside here, I'm going to grab it from these attributes and put it in instead
of dysfunction.
And what I'm going to do, I'm going to come here if I want to display all, I'm going to say this.
But why is this?
Because we are using a component's, having a class type, OK, once using a stateful components in
which you have a class component.
Make sure to put this key with this, OK, in order to call your function and you're going to state
increased price.
OK.
And if I tried to beg here and say, reloads, I don't have reaction about the ballot box, if I want
to see this message on my art box, I have to click on increased price.
And as you can see, I have this message, like I have this message.
And if I try to put my brackets like this, I'm going to get the similar things that I have in the beginning.
You read books will appear every time you're going to reload your page.
OK, and now we don't want this program.
Did you say is once you click to view to display your ballot box.
OK, so you have to avoid this problem.
So what you're going to do once you put your brackets like this, make sure to call the arrow function
just instead of your attributes like this, and then you're going to solve this problem.
Let us make sure let us reload and no reaction about the ballot box and click on increase press perfect's,
OK?
Otherwise, if I can do like this, this does increase price, but the D.A. here, we are going to define
dysfunction is in the room.
And when I say Ekert and I'm going to put like this so you can play with these different precise processes,
OK, you can play with these different processes.
And it is very simple.
OK, you can use directly in error function here and here.
You're are going to say simple, these dots increase process.
So remove this like remove your brackets like this.
Let us make here, let us reload.
And when you reload, you're going to see no reaction about our box.
And once you click on Price, you are going to see Àlex Box.
And it is very interesting to note all this.
These things, these things, and I think that's very helpful.
OK, very simple and what's required to and now you're going to know we have some thing once you use
Friesian part, a simple function is you can see here.
So let us.
Breakfast for the odd function like this.
It was perfect.
Lost.
Or three, glad to hear, yes, you are going to remove.
These rape kits like this, or you can put like this or general function other ways you can do like
this, you can remove these brackets.
It still works perfectly.
Just click here, click on Price.
OK, so what is the inconvenience of using this simple function?
OK, as you can see, we are using a class in a class components that is stateful components.
OK, and if you try to use the simple function, if we try to say.
To display a console like, say, for example, once they click on this button, so you are going to
display every properties, all properties of these.
OK, so let us back here.
Let us.
Rats click, inspect and click on console, click on Price, you're going to see this is going to be
undefined.
It's as you can see, this is undefined.
It's like.
If I tried to do something is.
These.
Properties.
Are like these little trophies for to like this.
Click on for as you can see, these properties are undefined because you are using a seaport function,
which is increase.
OK, but if you try to use a narrow function, like you say, equal to.
Use your air function if you try to make here and click on Enquist Press, you're going to see you have
these properties are you have all these objects, as you can see, all these properties.
OK, so if we try to remove this, you are going to see we are going to have all properties of this.
I can't click on press.
This is different purposes of this about the class that we have in these components and about the parents
class, which is components.
OK, so let us back here and you can see we have all these properties.
As you can see, we have props, everything, every function, all functions, everything about these
components.
Very good.
And agency here makes sure to use the air of function every time you are using it, glass components.
OK, do not use a simple function, Idrees, if you don't want to use the error function like this,
if you have, for example, here is simple function.
So what you are going to do, you are going to call your error functions us inside here.
Just such year, you're going to say just a dot increase.
OK, if you try to make here click on price.
Excuse me.
Here like these.
So, yes, here, do not forget to put brackets like this click on price.
OK, so you're going to see a different properties of your.
All the components we have, my cars, you're going to see a.
Are these OK in your class component, so you have to to keep all this in your minds every time we are
going to be using a class components, make sure to use every time in a row function.
OK, be called a juror function.
Is the modern JavaScript for the Eskimo's script.
OK, for you is the six.
So make sure to always use the JIRA function.
It is very interesting.
OK, so I want to tell you something.
We've done JavaScript where when you are using the event, when you are creating, for example, your
function by using events, because you have here a button on which we click when you click, for example,
it is an event once you're using, for example, events in JavaScript and then your function by beginning,
by beginning, by putting handlock in the beginning of your function.
For example, here we have increased press.
So make sure to begin with this word entry.
This is a convention like it is not an obligation, but it is just a convention, OK, or.
If you want, you can start with the name of your function, but just in the end, OK, make sure to
put handles like this, OK, in the beginning here, you're the first letter of entry, which is eight
must be in uppercase.
OK, so make sure to do like this.
It is not an obligation, but it is just a convention.
OK, so we are going to continue to the next video.