So what we're going to do is learn, so these methods, basically, get triggered during the life
cycle of an application.
We can also write our own methods.
So that's exactly what we're going to do.
So the simplest way I can do this is in the constructor, which will remove the
useless constructor error,
this will remove that error.
We're going to set this.state equals, and then an object,
and what we're going to set is a property called count is zero,
and I'm going to save. Now this does nothing right now.
So what we're going to do is we're going to get that count variable into the render method.
We're going to type let, and then we're going to wrap in curly braces count, equals this.state.
And what this does is it gets the count variable from the state.
Now we're gonna need a button.
So in the span right here, let's say
button, and let's just add click me. And then in the H1 element I'm going to remove this, and I'm going
to replace it with the text, you clicked the button.
Now we're going to print the count variable here, count times.
So I'm going to save this,
we're going to come back over to our browser, and it says you clicked the button zero times. We haven't
clicked it, yet.
And if I click it, well it doesn't do anything because we haven't rigged it up yet.
So what we're gonna do is we're going to write a method here called handleClick.
And this is the way we're gonna be writing methods.
so we don't have to bind them ourselves.
It's a variable equal to a function,
It's just how we're going to do it.
So what we're going to do is in the
button call,
so in the handle click,
so let's rig this up right now.
So, onClick.
Now this is a property. So if we render, well, we'll get to that after.
So notice it's camel case,
so onClick.
So, the HTML5 property is called onclick,
all lowercase,
this is going to be different. If you're migrating static HTML with JavaScript handlers to react,
this is going to be something you want to pay attention to.
So what we're going to do is equals and then curly braces. Alright. Now we can pass the event.
It can,
so we can capture the event of the button click, and then we're going to send it over to this.handle
Click.
Alright.
So good so far.
Save.
Go ahead and open up our browser.
And right now this does nothing, still, because our handleClick function doesn't do anything.
So for right now, very simply, I'm going to console.log clicked, just so we can actually see it do something.
I'm gonna save it.
Now let's go back over to our application and have the console open and click the button, and we can
see now it's actually clicking it and doing something.
So that's good.
Now it's important to note that if you don't have this bit right here, it's going to try to do this consistently
in your application.
See as soon as it mounts it calls that function, and it doesn't do anything else.
So we need to have something.
If there is no event you can just put brackets and then the arrow. We're going to pass it this function.
So onClick, this happens
Now really what we want to do here is we want to update the count variable to how many times they've
clicked the button, so that it will print out down here in the render method.
So, there is another built in method to the react component called setState.
And this takes an object as a parameter and an optional callback, which we won't be using right now but
I'm sure we will get to it.
So we're going to type this.setState, also camel case, and then we're going to pass it an objects.
Alright.
So what this object is going to be is the new state that we want to set.
So we're just going to set count to more than this state count.
So, count is going to be this.state.count + 1.
And I'm going to hit save.
So now we have everything rigged up and we're going to finally see the fruits of our labor.
Let's jump over into our browser, and let's start clicking this button.
See this? Alright.
Now that we've got a handle on how to work with the state,
we are going to, I was going to do something.
What was I going to do?
Alright.
The componentDidUpdate.
It just takes a props and a state.
So right now I'm going to console.log updated from, and then
we're going to print the old state, to, this.state.
So I'm going to save this.
And we're gonna go back into our browser,
load up the console and click.
Now the first time we do this we're going to see updated from the old state, which is count equals zero
to count equals 1.
And every time we click the button that event, or that function, gets called or triggered.
So, that is how to work with the state of a react application on a very basic level.
Now we could do something really stupid here.
Let's do something really stupid.
Because every time the state changes this method gets called,
we can do something really stupid in here and set the state.
So this.setState,
and this is going to produce an error,
we're gonna set it to this.state.count + 1.
And the error that it's going to get is maximum depth exceeded, and that basically means how many times,
how deep can a state change go within one state change.
So I'm going to click the button and we're gonna see everything lock up.
And that's because this is repeatedly triggering this to happen, see, which is very stupid.
However, we can hook into the component update
like this.
I'm going to set a property in the state called overTen to false.
And then what we're going to do here, we're going to say if this.state.count is more than 10
this.setState overTen equals true.
Now this is also going to have, it's also going to spit an error.
So let me just show you guys this, Beat
high score of 10!. Save. Because what's going to happen here is the component is going to update and it's
going to say if it's over 10.
So this is going to trigger an error when the state gets updated to 11, and then we're going
to get the maximum depth exceeded.
So let's go back into our application.
Oh, sorry.
That's right.
So,
that always is going to say beat the high score of 10 because we haven't added any logic.
So what we're gonna do is we're going to write some more JavaScript embedded in the HTML here, or
the DOM. We're going to basically do an if statement
in kind of an inline way. We're not going to type if, you know that we can't do that, but we can use ternary
operators.
We're going to just open up some brackets here, and we're going to say this.state.overTen.
You could just leave it at this.
This will resolve to true or false.
And we're going to say,
question mark.
So if it is over 10, if that returns true, do something. Then a colon, otherwise null. Otherwise, we don't care.
So I'm going to copy this and paste it up here.
So now if over 10 resolves to true we're going to print out beat high score of 10. And this operates
the same way as a top level wrapped component.
We can't have multiple top level elements. If we wanted to we'd have to wrap them. Just an aside.
So let's go back into our application and prepare to destroy this application once we get to 1.
So one, two, three, four, five, six, seven, eight, nine, ten.
And then when I click this one more time, we're going to get the maximum depth exceeded error because
what happened was it updated to eleven, and it called this function, and it's like, oh, it's over eleven so
I'm going to set the state to overTen equals true.
And then this setting of state triggers this again, and it gets stuck in an infinite loop.
So what we can do is add a little bit more logic here to sort this out.
So if the state is over, if the count state property is over 10 and this.state doesn't equal state,
so this means if the state has changed.
So what we can do is actually the state count. So we're going to only have this called if
the count is over 10, and if the state count is not the same as the new state count.
So this is only going to make it trigger once.
So I'm going to come back into my browser, and we're going to click this,
so that just happened once. Because when we set the over 10 to
true, this is going to trigger this method,
but the old state count is going to be the same as the new ones. So this won't get triggered again.
Now this will get called repeatedly every subsequent time.
So let me console.log here,
updating over ten. So I'm going to save this.
We're going to watch the console here and I'll show you what I mean.
Every button click after 10 will trigger that update to reset overTen to true, even though it's completely
unnecessary.
So we're going to add a little bit more logic here in a sec.
But for right now just click up to 10,
we don't get any logs, and then one more time, we get that, you know, update over 10.
So it's setting over 10 to be true again.
And we keep clicking it and it keeps setting it, which is unnecessary.
Right now it doesn't really matter for performance, but you're always going to want to keep in mind of
having a minimum amount of stuff happening to save performance.
So we're going to say if overTen is false then we need to set it to true.
Right?
So after that happens, every subsequent button click that changes the count and the count is over 10,
we're also going to check and this.state.overTen.
So we're going to say and not. So if this resolves to false then we will set it.
This make sense?
So we're going to save it and refresh the application, and we're going to see that over 10 getting set
just one time, and we beat the high score.
We're going to click and we see that it's not setting that property over and over again.
And we've just made this application, this very basic application, about 50 percent more efficient. And that's
very important when you're working with react.
It's very easy to get some errors in your react applications just because of not thinking in the
react way.
So that is how to work with the state. In the next video we're going to, I guess we'll talk about the
properties itself.