1
00:00:00,120 --> 00:00:02,720
We know how we can work with events.

2
00:00:02,760 --> 00:00:07,290
We know how we can access this thing but can we control the state.

3
00:00:07,290 --> 00:00:13,550
Can we make same kind of dynamic changes as we're clicking let's say the bottom unfolds.

4
00:00:13,560 --> 00:00:15,630
Why don't we create a little bit more buttons.

5
00:00:15,690 --> 00:00:20,250
So first of all I'm going to say that the actual method is not going to be handled click.

6
00:00:20,340 --> 00:00:22,500
Let's say we're going to be adding the count.

7
00:00:22,740 --> 00:00:25,480
So why don't we write it here and count.

8
00:00:25,560 --> 00:00:28,590
Obviously at the moment the actual method is not there.

9
00:00:28,590 --> 00:00:29,530
You know what.

10
00:00:29,550 --> 00:00:33,490
When I write it like this at count and now it's changed.

11
00:00:33,690 --> 00:00:35,620
So it's not going to be handled click.

12
00:00:35,720 --> 00:00:40,620
I'm going to delete this guy and we're gonna say yeah there's gonna be method in this case we're gonna

13
00:00:40,650 --> 00:00:48,000
call this head count we all gonna set this up as a neural function something like this and then for

14
00:00:48,000 --> 00:00:52,390
now let's just leave it empty because of what I would like to do is copy and paste it.

15
00:00:52,440 --> 00:00:58,950
So let's say this is gonna be a lower count lower count and then we're gonna have also reset the count

16
00:00:59,820 --> 00:01:01,760
as you can already probably guessed it.

17
00:01:02,220 --> 00:01:07,170
What we're gonna do right now is we're going to copy and paste and say One two three.

18
00:01:07,170 --> 00:01:12,270
These are gonna be our three buttons and then we're gonna be let's say resetting the count in the middle

19
00:01:12,270 --> 00:01:17,670
one as well as lowering in the I don't know the third one I guess.

20
00:01:18,180 --> 00:01:21,270
So let me say this and I can see that I have three buttons.

21
00:01:21,480 --> 00:01:24,000
Well all of them still do have the add count.

22
00:01:24,080 --> 00:01:26,470
So we obviously would need to change that as well.

23
00:01:26,820 --> 00:01:34,630
Let's say reset that would be my middle one as well as lower the count would be my far right one.

24
00:01:34,940 --> 00:01:35,790
Okay.

25
00:01:36,300 --> 00:01:37,770
What else is happening.

26
00:01:37,860 --> 00:01:39,720
We would need to figure out how we can change that.

27
00:01:40,080 --> 00:01:46,660
And since we are experts in JavaScript and based on our previous experience well what do we would do.

28
00:01:46,710 --> 00:01:51,180
We can head over here and we know that we are all functions everything is working fine.

29
00:01:51,180 --> 00:01:55,530
We don't need to worry about about some kind of context or anything like that.

30
00:01:55,590 --> 00:01:58,140
We can just head over to the state and change it.

31
00:01:58,170 --> 00:02:00,080
So how we would do that.

32
00:02:00,080 --> 00:02:04,290
Well let's say we're gonna say that this that we're going to be looking for the state.

33
00:02:04,290 --> 00:02:05,390
Then we're going to say OK.

34
00:02:05,470 --> 00:02:08,420
So the state is going to have some kind of value.

35
00:02:08,460 --> 00:02:11,300
However in our case we would like to change that.

36
00:02:12,060 --> 00:02:14,830
And what we're looking for is the actual count.

37
00:02:14,910 --> 00:02:16,210
So I can say something like this.

38
00:02:16,210 --> 00:02:22,320
So the moment I click it then the count in the actual state is going to be added by one.

39
00:02:22,380 --> 00:02:25,860
Obviously this is going to work exactly the same with all of them.

40
00:02:25,860 --> 00:02:34,740
And here I must say is that state and and why don't we add let's say plus 1 and hopefully everything

41
00:02:34,740 --> 00:02:36,980
is going to work going gonna save it.

42
00:02:37,080 --> 00:02:44,420
And before we even do anything we see a big fat warning not careless still ignored us.

43
00:02:44,610 --> 00:02:47,470
We can keep on clicking and nothing is happening.

44
00:02:47,470 --> 00:02:54,540
So why don't we test it out first first and still we have no actual value that's being changing in the

45
00:02:54,540 --> 00:02:57,140
state because we can click all day long.

46
00:02:57,150 --> 00:03:06,990
But the main idea is like this do not do not again repeat do not mutate the state state is immutable

47
00:03:07,410 --> 00:03:14,750
the whole deal how the react works is that React is keeping track of your state of the initial value

48
00:03:14,750 --> 00:03:15,150
or not.

49
00:03:15,850 --> 00:03:19,600
And then behind the scenes this is where react runs the virtual dot.

50
00:03:19,930 --> 00:03:20,920
So then it checks.

51
00:03:20,950 --> 00:03:21,340
OK.

52
00:03:21,370 --> 00:03:22,780
So there is some change.

53
00:03:22,780 --> 00:03:26,930
And that's the reason why only the change is applied to that specific part.

54
00:03:27,010 --> 00:03:33,340
What you changed and if you're going to be mutating the state directly which by the way you're not going

55
00:03:33,340 --> 00:03:37,890
to be able to do it this way anyway then you're going to be breaking that whole system.

56
00:03:37,900 --> 00:03:44,820
So that's the reason why we have the method of this that's that state because it does the Shalom.

57
00:03:45,340 --> 00:03:48,020
So it just checks for the properties that are there.

58
00:03:48,190 --> 00:03:51,560
But behind the scenes it keeps the old value in the state.

59
00:03:51,580 --> 00:03:55,690
So at this moment you can see that I'm just grabbing the states and I'm saying whatever.

60
00:03:55,690 --> 00:03:56,040
OK.

61
00:03:56,050 --> 00:03:58,810
So there was some kind of value but now this is going to be two.

62
00:03:59,200 --> 00:04:03,600
So what you are allowed to do is use this that said state.

63
00:04:03,940 --> 00:04:11,350
And that way you're doing the shallow merge and you're not again mutating the state because the state

64
00:04:11,350 --> 00:04:16,150
is immutable as you can see again do not mutate the state use the state instead.

65
00:04:16,510 --> 00:04:20,490
And again if you want to see that in the integrated terminal you can open up it over here.

66
00:04:20,500 --> 00:04:25,290
And again you're not going to see on the line 13 that this is what they're telling.

67
00:04:25,350 --> 00:04:30,550
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

68
00:04:30,550 --> 00:04:32,130
not a proper way.

69
00:04:32,300 --> 00:04:38,140
And now let's start using the it is that state power maybe before we do that why don't we add some kind

70
00:04:38,140 --> 00:04:42,660
of value here what we're having in the state is that way at least we're going to be able to see whether

71
00:04:42,670 --> 00:04:43,680
everything is working.

72
00:04:43,960 --> 00:04:48,410
So let's say some having three we know that we can access the value in a state.

73
00:04:48,520 --> 00:04:52,380
So there's that state and we're going to call this count.

74
00:04:52,390 --> 00:04:58,410
We can also set it up to maybe some kind of name so count colon.

75
00:04:58,620 --> 00:04:59,480
We're going to save it.

76
00:04:59,530 --> 00:05:04,390
And then there's going gonna be ARCO and now we're gonna head over back to the old count and why don't

77
00:05:04,390 --> 00:05:05,820
we do it the proper way with this.

78
00:05:05,830 --> 00:05:09,260
That's state and for this again we just need to run it.

79
00:05:09,280 --> 00:05:10,520
There's doubts at State.

80
00:05:10,540 --> 00:05:16,930
That would be the method name or the way this one works is there's gonna be a few possible ways in this

81
00:05:16,930 --> 00:05:21,610
case we're just passing here New Hampshire later on we're going to look at how we can run this.

82
00:05:21,610 --> 00:05:26,740
That said state with a function and that's gonna be important because even though right now it's kind

83
00:05:26,740 --> 00:05:29,140
of out of the realm of what we're covering.

84
00:05:29,140 --> 00:05:33,280
But state or is that's a state there's gonna be a synchronous.

85
00:05:33,280 --> 00:05:36,030
And again it's gonna be easier for me to show you with an example.

86
00:05:36,520 --> 00:05:37,900
So maybe at the moment.

87
00:05:37,900 --> 00:05:39,890
Again don't lose your sleep over it.

88
00:05:40,030 --> 00:05:42,010
Just gonna be using with an object here.

89
00:05:42,190 --> 00:05:48,430
But just remember that you will going to be seeing a different syntax later on how this is gonna work

90
00:05:48,520 --> 00:05:50,500
is that this is my state.

91
00:05:51,440 --> 00:05:54,910
And here within this object I'm passing whatever I would like to change.

92
00:05:55,330 --> 00:05:57,070
So in my case what I'm looking for.

93
00:05:57,070 --> 00:05:58,300
Well I'm looking for the count.

94
00:05:58,810 --> 00:06:03,910
However if there's gonna be let's say another property and just to show you that this is not going to

95
00:06:03,910 --> 00:06:08,390
be affected I can say name and let's say here John.

96
00:06:08,410 --> 00:06:11,740
And also add here maybe where we have the count.

97
00:06:11,740 --> 00:06:16,900
Let me copy and paste it just to show you again that the name is not gonna change because we're not

98
00:06:16,960 --> 00:06:23,200
affecting that property and that is important because later on obviously our state isn't gonna be much

99
00:06:23,200 --> 00:06:26,380
more complicated than what we're having right now.

100
00:06:26,380 --> 00:06:31,360
And this is something you should always remember that you were only going to be affecting the values

101
00:06:31,690 --> 00:06:36,450
that you specifically write in this state because this is gonna be doing the shallow Mark.

102
00:06:36,780 --> 00:06:42,680
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

103
00:06:42,690 --> 00:06:48,940
we'll gonna use these there's that and then I'm gonna be looking for state then the value whatever it

104
00:06:48,940 --> 00:06:54,020
was and as well as plus one and now we can I guess that's that out.

105
00:06:54,280 --> 00:06:59,110
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

106
00:06:59,110 --> 00:07:05,320
press count now the count is gonna be number two and a press it again and then again this is gonna be

107
00:07:05,320 --> 00:07:06,370
number three.

108
00:07:06,370 --> 00:07:10,200
And in this case what do you see is that John is not being effect.

109
00:07:10,450 --> 00:07:15,410
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

110
00:07:15,430 --> 00:07:16,500
name.

111
00:07:16,590 --> 00:07:19,640
Why don't we set it as a beta.

112
00:07:19,680 --> 00:07:21,180
So now we're gonna save it.

113
00:07:21,210 --> 00:07:24,810
Obviously this is gonna work only the first time so the first time we're gonna click it.

114
00:07:24,820 --> 00:07:26,770
Notice this is gonna change to Peter.

115
00:07:26,820 --> 00:07:32,420
But then since we already have collected unless we refresh the page again we're gonna have John.

116
00:07:32,430 --> 00:07:36,780
But I can keep on clicking the count is gonna be changing since we are increasing here.

117
00:07:36,900 --> 00:07:38,990
But the name is just gonna change one more time.

118
00:07:39,210 --> 00:07:44,610
And again we can just get rid of it because this was again just to show you of what things are gonna

119
00:07:44,640 --> 00:07:48,460
be changing and only the things that we specifically right here.

120
00:07:48,570 --> 00:07:51,670
Which key and what kind of value they should have.

121
00:07:51,690 --> 00:07:57,300
So why don't we write this and then we're gonna check it out how we can use the reactors because at

122
00:07:57,300 --> 00:08:03,420
the moment you can see a nice thing that the state for each and every book that we were rendering and

123
00:08:03,420 --> 00:08:05,450
maybe let me close the console.

124
00:08:05,460 --> 00:08:09,640
But what we're seeing is that each and every book here has its own state.

125
00:08:10,270 --> 00:08:13,820
And that is they're very useful because later on we're going to use that fact.

126
00:08:14,130 --> 00:08:16,790
But in this case again you can see the count this year.

127
00:08:16,850 --> 00:08:18,050
Then let's say 0 here.

128
00:08:18,060 --> 00:08:19,600
But we're not changing it.

129
00:08:19,620 --> 00:08:22,770
So if I'm gonna press on the first one all the way up to the 10.

130
00:08:22,920 --> 00:08:28,370
This is not going to affect any of these other books because they all have their own separate state.

131
00:08:28,430 --> 00:08:29,540
So why don't we do this.

132
00:08:29,550 --> 00:08:36,240
Why don't we have the function to say here like this instead of maybe lowering the count we would want

133
00:08:36,240 --> 00:08:43,090
to have decreased the value and then in this case why don't we start at zero so we can copy and paste

134
00:08:43,090 --> 00:08:43,630
it.

135
00:08:43,670 --> 00:08:47,070
This is the state count which is gonna set it to zero.

136
00:08:47,080 --> 00:08:52,140
When I say count is gonna be reset it all the way down to zero.

137
00:08:52,300 --> 00:08:56,810
And for this while we test it out again they react there will portals.

138
00:08:56,890 --> 00:09:02,380
So I'm gonna make this kind of big then I'm gonna open up again council and then I'm gonna be looking

139
00:09:02,380 --> 00:09:05,260
for the react now wouldn't in the react.

140
00:09:05,260 --> 00:09:10,600
Let me close some of them because this is gonna be kind of big so I'm gonna close the book now I can

141
00:09:10,600 --> 00:09:15,690
see that I have six books here what do you see here on the right hand side for these books.

142
00:09:15,760 --> 00:09:17,950
Let me make this bigger as you noticed.

143
00:09:17,950 --> 00:09:19,700
Now we know what we're talking about.

144
00:09:19,840 --> 00:09:24,810
Remember in the beginning I showed you the react developer tools and it was kind of like okay.

145
00:09:24,850 --> 00:09:25,600
Good to know.

146
00:09:25,600 --> 00:09:27,700
But I mean didn't make any sense.

147
00:09:27,760 --> 00:09:28,910
Look at this right now.

148
00:09:29,020 --> 00:09:29,710
What do we see.

149
00:09:29,710 --> 00:09:32,200
I mean we already could understand a lot of things.

150
00:09:32,230 --> 00:09:38,240
So this one says Okay the key is here use one that info is what we are getting right.

151
00:09:38,260 --> 00:09:44,680
So we're passing the perhaps we're getting the info is the author the image then the state here is equal

152
00:09:44,680 --> 00:09:45,100
to the one.

153
00:09:45,490 --> 00:09:48,790
So what go here and then as I am adding check this out.

154
00:09:49,120 --> 00:09:51,180
So obviously my count is increasing.

155
00:09:51,280 --> 00:09:54,190
And one other lowered then the count is gonna be lower.

156
00:09:54,640 --> 00:09:55,690
I want to reset it.

157
00:09:55,840 --> 00:09:57,360
Then the count is gonna reset.

158
00:09:57,550 --> 00:10:00,090
And the same thing would work with all of them.

159
00:10:00,100 --> 00:10:06,460
So just because I'm again affecting the first one on my third one nothing is changing because each one

160
00:10:06,460 --> 00:10:08,020
of them have their own state.

161
00:10:08,230 --> 00:10:14,670
And I guess the biggest tech way that I would say from this video is the fact that always always use

162
00:10:14,670 --> 00:10:18,250
said state are you all gonna be using it as a function.

163
00:10:18,280 --> 00:10:22,880
Because again we'll get a check in later how we can pass here to function or you're gonna be passing

164
00:10:22,880 --> 00:10:30,520
near the object but always always use the site state because state is immutable and that's the reason

165
00:10:30,520 --> 00:10:31,590
why we have this method.