We know how we can work with events.
We know how we can access this thing but can we control the state.
Can we make same kind of dynamic changes as we're clicking let's say the bottom unfolds.
Why don't we create a little bit more buttons.
So first of all I'm going to say that the actual method is not going to be handled click.
Let's say we're going to be adding the count.
So why don't we write it here and count.
Obviously at the moment the actual method is not there.
You know what.
When I write it like this at count and now it's changed.
So it's not going to be handled click.
I'm going to delete this guy and we're gonna say yeah there's gonna be method in this case we're gonna
call this head count we all gonna set this up as a neural function something like this and then for
now let's just leave it empty because of what I would like to do is copy and paste it.
So let's say this is gonna be a lower count lower count and then we're gonna have also reset the count
as you can already probably guessed it.
What we're gonna do right now is we're going to copy and paste and say One two three.
These are gonna be our three buttons and then we're gonna be let's say resetting the count in the middle
one as well as lowering in the I don't know the third one I guess.
So let me say this and I can see that I have three buttons.
Well all of them still do have the add count.
So we obviously would need to change that as well.
Let's say reset that would be my middle one as well as lower the count would be my far right one.
Okay.
What else is happening.
We would need to figure out how we can change that.
And since we are experts in JavaScript and based on our previous experience well what do we would do.
We can head over here and we know that we are all functions everything is working fine.
We don't need to worry about about some kind of context or anything like that.
We can just head over to the state and change it.
So how we would do that.
Well let's say we're gonna say that this that we're going to be looking for the state.
Then we're going to say OK.
So the state is going to have some kind of value.
However in our case we would like to change that.
And what we're looking for is the actual count.
So I can say something like this.
So the moment I click it then the count in the actual state is going to be added by one.
Obviously this is going to work exactly the same with all of them.
And here I must say is that state and and why don't we add let's say plus 1 and hopefully everything
is going to work going gonna save it.
And before we even do anything we see a big fat warning not careless still ignored us.
We can keep on clicking and nothing is happening.
So why don't we test it out first first and still we have no actual value that's being changing in the
state because we can click all day long.
But the main idea is like this do not do not again repeat do not mutate the state state is immutable
the whole deal how the react works is that React is keeping track of your state of the initial value
or not.
And then behind the scenes this is where react runs the virtual dot.
So then it checks.
OK.
So there is some change.
And that's the reason why only the change is applied to that specific part.
What you changed and if you're going to be mutating the state directly which by the way you're not going
to be able to do it this way anyway then you're going to be breaking that whole system.
So that's the reason why we have the method of this that's that state because it does the Shalom.
So it just checks for the properties that are there.
But behind the scenes it keeps the old value in the state.
So at this moment you can see that I'm just grabbing the states and I'm saying whatever.
OK.
So there was some kind of value but now this is going to be two.
So what you are allowed to do is use this that said state.
And that way you're doing the shallow merge and you're not again mutating the state because the state
is immutable as you can see again do not mutate the state use the state instead.
And again if you want to see that in the integrated terminal you can open up it over here.
And again you're not going to see on the line 13 that this is what they're telling.
Ok so why don't we test that out and first of all why don't we just get rid of this because this is
not a proper way.
And now let's start using the it is that state power maybe before we do that why don't we add some kind
of value here what we're having in the state is that way at least we're going to be able to see whether
everything is working.
So let's say some having three we know that we can access the value in a state.
So there's that state and we're going to call this count.
We can also set it up to maybe some kind of name so count colon.
We're going to save it.
And then there's going gonna be ARCO and now we're gonna head over back to the old count and why don't
we do it the proper way with this.
That's state and for this again we just need to run it.
There's doubts at State.
That would be the method name or the way this one works is there's gonna be a few possible ways in this
case we're just passing here New Hampshire later on we're going to look at how we can run this.
That said state with a function and that's gonna be important because even though right now it's kind
of out of the realm of what we're covering.
But state or is that's a state there's gonna be a synchronous.
And again it's gonna be easier for me to show you with an example.
So maybe at the moment.
Again don't lose your sleep over it.
Just gonna be using with an object here.
But just remember that you will going to be seeing a different syntax later on how this is gonna work
is that this is my state.
And here within this object I'm passing whatever I would like to change.
So in my case what I'm looking for.
Well I'm looking for the count.
However if there's gonna be let's say another property and just to show you that this is not going to
be affected I can say name and let's say here John.
And also add here maybe where we have the count.
Let me copy and paste it just to show you again that the name is not gonna change because we're not
affecting that property and that is important because later on obviously our state isn't gonna be much
more complicated than what we're having right now.
And this is something you should always remember that you were only going to be affecting the values
that you specifically write in this state because this is gonna be doing the shallow Mark.
So in our case I'm going to say that OK there will gonna be in state value of the count and I'm gonna
we'll gonna use these there's that and then I'm gonna be looking for state then the value whatever it
was and as well as plus one and now we can I guess that's that out.
So I can see for all of them are going to be count and then the John or Mike is the moment I'm gonna
press count now the count is gonna be number two and a press it again and then again this is gonna be
number three.
And in this case what do you see is that John is not being effect.
Only if I'm gonna head over here and I'm going to say Yeah I don't like that name so I'm going to say
name.
Why don't we set it as a beta.
So now we're gonna save it.
Obviously this is gonna work only the first time so the first time we're gonna click it.
Notice this is gonna change to Peter.
But then since we already have collected unless we refresh the page again we're gonna have John.
But I can keep on clicking the count is gonna be changing since we are increasing here.
But the name is just gonna change one more time.
And again we can just get rid of it because this was again just to show you of what things are gonna
be changing and only the things that we specifically right here.
Which key and what kind of value they should have.
So why don't we write this and then we're gonna check it out how we can use the reactors because at
the moment you can see a nice thing that the state for each and every book that we were rendering and
maybe let me close the console.
But what we're seeing is that each and every book here has its own state.
And that is they're very useful because later on we're going to use that fact.
But in this case again you can see the count this year.
Then let's say 0 here.
But we're not changing it.
So if I'm gonna press on the first one all the way up to the 10.
This is not going to affect any of these other books because they all have their own separate state.
So why don't we do this.
Why don't we have the function to say here like this instead of maybe lowering the count we would want
to have decreased the value and then in this case why don't we start at zero so we can copy and paste
it.
This is the state count which is gonna set it to zero.
When I say count is gonna be reset it all the way down to zero.
And for this while we test it out again they react there will portals.
So I'm gonna make this kind of big then I'm gonna open up again council and then I'm gonna be looking
for the react now wouldn't in the react.
Let me close some of them because this is gonna be kind of big so I'm gonna close the book now I can
see that I have six books here what do you see here on the right hand side for these books.
Let me make this bigger as you noticed.
Now we know what we're talking about.
Remember in the beginning I showed you the react developer tools and it was kind of like okay.
Good to know.
But I mean didn't make any sense.
Look at this right now.
What do we see.
I mean we already could understand a lot of things.
So this one says Okay the key is here use one that info is what we are getting right.
So we're passing the perhaps we're getting the info is the author the image then the state here is equal
to the one.
So what go here and then as I am adding check this out.
So obviously my count is increasing.
And one other lowered then the count is gonna be lower.
I want to reset it.
Then the count is gonna reset.
And the same thing would work with all of them.
So just because I'm again affecting the first one on my third one nothing is changing because each one
of them have their own state.
And I guess the biggest tech way that I would say from this video is the fact that always always use
said state are you all gonna be using it as a function.
Because again we'll get a check in later how we can pass here to function or you're gonna be passing
near the object but always always use the site state because state is immutable and that's the reason
why we have this method.