1
00:00:00,210 --> 00:00:07,080
Once we are aware of how we can work with class based components why don't we take a look at the major

2
00:00:07,320 --> 00:00:12,420
players that are going to be happening once we use the class based component.

3
00:00:12,420 --> 00:00:19,410
And that would be state as well as the this that sets and the reason would be very simple because for

4
00:00:19,410 --> 00:00:26,160
now we have been using the props and perhaps are great props are awesome our props are read only.

5
00:00:26,490 --> 00:00:33,720
And if you'd want to hold access or change the data of the component we will gonna have to use the state

6
00:00:34,170 --> 00:00:39,820
as well as this that said state which we're going to cover in more detail as we work with events.

7
00:00:39,840 --> 00:00:45,360
However I do want to tell you right away that there is a reasoning why we're calling the state and the

8
00:00:45,360 --> 00:00:47,850
reason is the fact that we can access it later on.

9
00:00:48,220 --> 00:00:48,830
OK.

10
00:00:49,020 --> 00:00:55,470
Now I also need to warn you right away that this video can get quite long because I do want to kind

11
00:00:55,470 --> 00:00:58,660
of show you all the pitfalls the children have along the way.

12
00:00:58,770 --> 00:01:03,870
If you're not using this and first and foremost I would want to delete a little bit of what we have

13
00:01:03,870 --> 00:01:08,340
so far because there's quite a bit of junk that we really don't need.

14
00:01:08,790 --> 00:01:13,470
So let's say first we're going to begin getting rid of all these imports here as well as we're just

15
00:01:13,470 --> 00:01:14,550
going to say you know what.

16
00:01:14,700 --> 00:01:17,560
We don't want the banner We don't want the section.

17
00:01:17,610 --> 00:01:20,730
We're just gonna say here that this is going to be heading one.

18
00:01:20,910 --> 00:01:22,220
And we're just going to call this.

19
00:01:22,230 --> 00:01:26,070
This is our application.

20
00:01:26,070 --> 00:01:27,480
So that's going to be my app.

21
00:01:27,570 --> 00:01:33,180
And by the way again I can pick and choose whatever I would like whether I want a functional component

22
00:01:33,570 --> 00:01:35,110
as well as the class one.

23
00:01:35,220 --> 00:01:37,100
So why don't we delete the class one for now.

24
00:01:37,590 --> 00:01:39,420
Let's change the export.

25
00:01:39,420 --> 00:01:40,560
So this is gonna be one.

26
00:01:40,560 --> 00:01:42,210
So now this is going to be working.

27
00:01:42,240 --> 00:01:43,980
We might as well can leave the import.

28
00:01:44,000 --> 00:01:46,350
Doesn't really matter it's not going to affect us.

29
00:01:46,350 --> 00:01:47,720
And then you know what.

30
00:01:47,960 --> 00:01:50,790
We will go and head over to a component.

31
00:01:50,910 --> 00:01:52,740
I'm going to delete the whole folder.

32
00:01:52,810 --> 00:01:56,120
I'm not going to use the folder as well as we're gonna get rid of the data.

33
00:01:56,700 --> 00:02:00,760
And what I would be looking for is not the package Jason.

34
00:02:00,780 --> 00:02:01,800
That's not what I wanted.

35
00:02:01,800 --> 00:02:08,400
I can also close the index and then let me delete the data which I wanted to do in the first place and

36
00:02:08,400 --> 00:02:10,530
then we're gonna set up two components.

37
00:02:10,530 --> 00:02:14,010
One is gonna be book list and the other one is gonna be book.

38
00:02:14,220 --> 00:02:17,280
So let's say within the source there is going to be new file.

39
00:02:17,280 --> 00:02:19,960
I'm going to call this book list.

40
00:02:20,010 --> 00:02:21,240
We can capitalize it.

41
00:02:21,240 --> 00:02:21,960
We can write it.

42
00:02:21,970 --> 00:02:22,840
We had this.

43
00:02:22,860 --> 00:02:26,330
There's no on the matter and we say book was that genius.

44
00:02:26,430 --> 00:02:33,710
So for now let's just leave this empty and let's create another file that we're gonna call book.

45
00:02:33,750 --> 00:02:37,340
So this is gonna be my second component with a book.

46
00:02:37,710 --> 00:02:42,360
So these are gonna be three files we're gonna be doing most of our work so I might as well can close

47
00:02:42,360 --> 00:02:45,180
the sidebar just so we can see everything better.

48
00:02:45,510 --> 00:02:47,600
And then we know that we can use the snippets.

49
00:02:47,730 --> 00:02:52,640
Now this guy at the book list is gonna be the class based component because this is we're all gonna

50
00:02:52,660 --> 00:02:58,740
be practicing with our state so how we can get the easy syntax for their class component important we

51
00:02:58,740 --> 00:03:00,070
just type RCC.

52
00:03:00,090 --> 00:03:02,980
Now if we would want a function based component this is gonna be our reps.

53
00:03:03,480 --> 00:03:08,720
So this isn't gonna do the RCC C and then we have right away our class based component.

54
00:03:08,850 --> 00:03:09,840
Awesome.

55
00:03:09,840 --> 00:03:11,420
Everything is working really well.

56
00:03:11,430 --> 00:03:14,040
So why don't we have again some kind of section.

57
00:03:14,310 --> 00:03:20,280
So let's write here section then we also we're gonna be selecting the second section there's gonna be

58
00:03:20,280 --> 00:03:24,930
a second section and within the section again we're going to start very simply by some kind of having

59
00:03:24,930 --> 00:03:33,680
three and we're gonna say this is our book we're gonna call this list so we can say something like this.

60
00:03:33,730 --> 00:03:34,940
So this is gonna be our book.

61
00:03:35,630 --> 00:03:38,410
Well I also want to write a way.

62
00:03:38,470 --> 00:03:44,080
Import the book the functional component that we're going to be creating here and again in this case

63
00:03:44,110 --> 00:03:48,070
we're gonna be using half C and then this is now going to be Dave.

64
00:03:48,160 --> 00:03:52,870
Let's just change it let's say I'm going to select them both and I'm going to say that this is gonna

65
00:03:52,870 --> 00:03:58,060
be some kind of article and within the article there is gonna be two hitting threes for now they're

66
00:03:58,060 --> 00:04:03,970
not going to mean anything we're not gonna be using with any kind of dynamic data but we're gonna say

67
00:04:03,970 --> 00:04:10,990
book and we can just put a colon and then we're gonna copy paste it and we're gonna have some kind of

68
00:04:11,110 --> 00:04:11,880
author.

69
00:04:12,010 --> 00:04:19,240
Well why don't we do the author would like adding five something a little bit smaller so something like

70
00:04:19,240 --> 00:04:25,210
this let me say it and now like I said I would want to export it which by the way is already happening

71
00:04:25,210 --> 00:04:29,410
here the moment we set it up with a snippet we are doing already.

72
00:04:29,410 --> 00:04:35,260
Default export unless you hate the syntax then again you can write that this would be simple function

73
00:04:35,620 --> 00:04:41,890
and then you just write the export default somewhere here no item no in my case I'm fine with the syntax

74
00:04:41,920 --> 00:04:47,020
I know that this would be an export default and I know that this would be exactly in the same folder.

75
00:04:47,140 --> 00:04:51,290
Plus the export is default so I can names whatever I'd like.

76
00:04:51,340 --> 00:04:57,390
So in the book list I'm going to say from that I'm gonna be looking for the file and the file is gonna

77
00:04:57,410 --> 00:05:00,960
be book and this is gonna be exactly here right next to it.

78
00:05:01,120 --> 00:05:02,300
So we can save it.

79
00:05:02,320 --> 00:05:03,570
That would be my book list.

80
00:05:03,730 --> 00:05:09,340
And then right underneath the hearing three we're all gonna be rendering our book for now.

81
00:05:09,340 --> 00:05:11,100
This is exactly what we're going to have.

82
00:05:11,250 --> 00:05:13,850
We can do the self closing tag right away.

83
00:05:13,850 --> 00:05:14,760
There is no difference.

84
00:05:14,790 --> 00:05:16,750
And then obviously nothing is changing.

85
00:05:16,770 --> 00:05:22,680
And the reason nothing is changing because we need to head over back to the map up James and we need

86
00:05:22,680 --> 00:05:26,690
to import this as well so I can just leave the comments maybe on top.

87
00:05:26,720 --> 00:05:30,320
But maybe right after react let's do import.

88
00:05:30,420 --> 00:05:36,180
And now we're looking for a book list which obviously again is going to be default export anyway so

89
00:05:36,180 --> 00:05:37,800
it doesn't really matter how we call it.

90
00:05:37,830 --> 00:05:43,500
But just for the sake of clarity why don't we use the book list and then let's say that here this is

91
00:05:43,500 --> 00:05:48,260
gonna be heading one and right after the hearing one we all gonna be working with the book.

92
00:05:48,800 --> 00:05:49,580
And that's it.

93
00:05:49,620 --> 00:05:55,200
We need to do for now in our wrap and I don't think we're going to actually do any kind of any more

94
00:05:55,200 --> 00:06:00,990
work so I can just close the app and now I'm going to be focusing between these two where we have the

95
00:06:00,990 --> 00:06:01,890
book list.

96
00:06:01,950 --> 00:06:08,220
So this would be the component that's gonna hold a list of items and then we're gonna be rendering them

97
00:06:08,280 --> 00:06:13,740
depending on some kind of ideas that we would have as well as there is gonna be a book that's gonna

98
00:06:13,770 --> 00:06:15,960
render each and every single item.

99
00:06:16,080 --> 00:06:20,790
And this is by the way something that you're going to see quite a lot where as you're gonna be working

100
00:06:21,090 --> 00:06:26,300
you're gonna be setting this up where there's gonna be some kind of a list and then most likely you'll

101
00:06:26,370 --> 00:06:32,070
gonna be setting up some kind of simple component or maybe not simple component but some kind of single

102
00:06:32,070 --> 00:06:36,000
component doesn't gonna reflect that single item analyst.

103
00:06:36,070 --> 00:06:41,100
Again this is just a side note but this is not the first and the last time you're gonna see this where

104
00:06:41,100 --> 00:06:46,410
there's gonna be a list and then we're gonna work with that each and every item of the list with a separate

105
00:06:46,410 --> 00:06:47,290
component.

106
00:06:47,310 --> 00:06:52,180
This is quite typical common syntax that we're using.

107
00:06:52,320 --> 00:06:52,830
Okay.

108
00:06:53,100 --> 00:06:54,790
So where we're going from here.

109
00:06:55,020 --> 00:06:56,190
So I have the book.

110
00:06:56,190 --> 00:06:56,940
Awesome.

111
00:06:56,950 --> 00:06:59,550
Everything is working well but what.

112
00:06:59,790 --> 00:07:04,080
Let's say that there's going to be multiple books I just don't want one book.

113
00:07:04,080 --> 00:07:05,460
I want multiple.

114
00:07:05,460 --> 00:07:11,220
Well we already know okay so there's a class and maybe in a class I can create an array.

115
00:07:11,270 --> 00:07:11,560
All right.

116
00:07:11,730 --> 00:07:16,500
After all this is a class so I can say books and let's say that this is gonna be my right.

117
00:07:17,250 --> 00:07:24,020
And within the books let's do since this is the proper way there is gonna be bunch of objects.

118
00:07:24,030 --> 00:07:29,850
And when I say bunch of objects where knowledge is due to and then later on we can might add some let's

119
00:07:29,850 --> 00:07:40,250
say book and this would be book book number and let's say 1 as was let's add the author author.

120
00:07:40,550 --> 00:07:45,510
And here all going to be saying author is going to be I don't know John Doe now what I would like right

121
00:07:45,540 --> 00:07:52,370
now since this is my array I would like to copy and paste it and I'll head over back here and I'm gonna

122
00:07:52,380 --> 00:07:57,550
add maybe a comma since that will be the proper syntax and let's just change it around here.

123
00:07:57,630 --> 00:08:02,230
Let's say this is not going to be book number one in fact this would be book number two.

124
00:08:02,670 --> 00:08:05,840
And the author is gonna be I don't know Bobby Doyle.

125
00:08:06,020 --> 00:08:06,740
Okay.

126
00:08:06,810 --> 00:08:07,950
So far so good.

127
00:08:08,100 --> 00:08:09,600
Everything is working fine.

128
00:08:09,630 --> 00:08:13,370
We already know that we can pass the props we already aware.

129
00:08:13,740 --> 00:08:14,870
So why don't we do that.

130
00:08:14,970 --> 00:08:21,270
Why don't we say that we're going to be passing the props and within the props we're going to be looking

131
00:08:21,270 --> 00:08:26,910
for some type of information that we're looking for from the books.

132
00:08:26,910 --> 00:08:28,210
So how this is gonna work.

133
00:08:28,380 --> 00:08:35,010
Well let's say we're gonna name our prop book then this is gonna be equal to the array that we have

134
00:08:35,310 --> 00:08:36,770
color in this case.

135
00:08:36,840 --> 00:08:44,850
We do need to use something we do need to use something else in the syntax because now we're in a class.

136
00:08:44,850 --> 00:08:47,410
So now we're not just working with the simple array.

137
00:08:47,430 --> 00:08:48,810
This is in fact class.

138
00:08:48,810 --> 00:08:53,370
So we need to point back to this class and the way we're gonna do that we need to use the key word of

139
00:08:53,370 --> 00:08:59,040
this then obviously the array is going to be books and then I'm going to be let's say looking for the

140
00:08:59,040 --> 00:09:00,020
first item.

141
00:09:00,030 --> 00:09:03,260
Now how can I access the item in the array.

142
00:09:03,300 --> 00:09:05,330
The first one is gonna be zero.

143
00:09:05,520 --> 00:09:07,000
So I can access the zero.

144
00:09:07,010 --> 00:09:07,850
Okay.

145
00:09:08,050 --> 00:09:09,890
Everything is working really well.

146
00:09:09,960 --> 00:09:16,920
Now we can know already that we can head over back to our book and we can access the prompts the question

147
00:09:16,920 --> 00:09:21,990
right now is and I purposely by the way made a class component because I wanted to show you how in a

148
00:09:21,990 --> 00:09:27,900
class based component we can access the props because usually with function and you know what I'm looking

149
00:09:27,900 --> 00:09:29,600
at I guess they created function.

150
00:09:29,640 --> 00:09:33,080
So my apologies why don't we we do this again.

151
00:09:33,090 --> 00:09:34,080
I do apologize.

152
00:09:34,080 --> 00:09:37,840
I do want to show you how you can do it in the actual class.

153
00:09:37,920 --> 00:09:44,910
I'm sorry I did previously with a function I thought I did the class but I was misunderstand and then

154
00:09:44,910 --> 00:09:47,000
let's say that we're going to be working with the class.

155
00:09:47,160 --> 00:09:51,560
So again same question how we can work with props in the class.

156
00:09:51,990 --> 00:09:52,470
And you know what.

157
00:09:52,470 --> 00:09:54,830
Let's do simple thing here.

158
00:09:54,980 --> 00:10:01,680
And a section or not this was article right through an article and we can have the article right here

159
00:10:02,010 --> 00:10:07,100
and then we're gonna do the same thing having three and let's say this book.

160
00:10:07,100 --> 00:10:12,440
So in the colon for the book as well as we're going to copy paste it and we're gonna have the ending

161
00:10:12,450 --> 00:10:16,720
five for our author so far so good.

162
00:10:16,720 --> 00:10:19,450
Again we did a little bit of detour.

163
00:10:19,450 --> 00:10:21,100
I hope you're going to forgive me.

164
00:10:21,100 --> 00:10:27,760
And now the million dollar question how can we access the props in class because this is not a functional

165
00:10:27,760 --> 00:10:29,560
component anymore for sure.

166
00:10:29,560 --> 00:10:33,070
Now this is a class based upon and the way we do that.

167
00:10:33,070 --> 00:10:39,220
Well first of all we can look at the destruction but maybe before we do that why don't we do it again

168
00:10:39,220 --> 00:10:40,490
above the return.

169
00:10:40,500 --> 00:10:43,550
So don't do it within the return that's just x.

170
00:10:43,660 --> 00:10:45,290
Let's just write a simple log.

171
00:10:45,490 --> 00:10:47,570
And again we need to use the keyword.

172
00:10:47,590 --> 00:10:49,540
Now the keyword is this.

173
00:10:49,540 --> 00:10:51,680
And then we're looking for props.

174
00:10:51,830 --> 00:10:53,170
Again the naming here.

175
00:10:53,170 --> 00:10:55,290
And now let's head over to the console.

176
00:10:55,510 --> 00:11:00,400
Probably already guessed it what we're going to see it or hear we're going to go to the console and

177
00:11:00,400 --> 00:11:01,910
then I see the object.

178
00:11:01,990 --> 00:11:05,200
Now here I see that component is defined.

179
00:11:05,380 --> 00:11:07,330
But this is never used.

180
00:11:07,330 --> 00:11:12,790
So I was this is gonna be an app and not throughout the tutorial or throughout this video.

181
00:11:12,790 --> 00:11:14,610
This might annoy me a little bit.

182
00:11:14,830 --> 00:11:19,780
So why don't we get rid of this since this is gonna be the functional component anyway so I don't need

183
00:11:19,780 --> 00:11:19,900
it.

184
00:11:19,930 --> 00:11:26,960
Let me save it and now let me go again close the sidebar on this you can be looking for stuff so let's

185
00:11:26,960 --> 00:11:27,790
do it this way.

186
00:11:27,790 --> 00:11:29,580
And then we don't need that anymore.

187
00:11:29,680 --> 00:11:31,140
And what do you see here.

188
00:11:31,180 --> 00:11:33,910
What do you see here on the right hand side in the console.

189
00:11:34,140 --> 00:11:41,800
And there's not props while we see the book and the book at this point is number one.

190
00:11:41,800 --> 00:11:45,370
And then within the book we obviously have the other as well as the book.

191
00:11:45,970 --> 00:11:47,230
So everything is working fine.

192
00:11:47,230 --> 00:11:52,270
So the difference would be within the class we're using this does that props within the function we

193
00:11:52,270 --> 00:11:57,610
just passed it down as an argument in this case however we're using this does not prompt.

194
00:11:57,970 --> 00:12:04,170
So what we can do is since we know that there can be in the structuring and by the way let me just come

195
00:12:04,220 --> 00:12:06,520
this out for future reference.

196
00:12:06,520 --> 00:12:07,560
Maybe you'll want it.

197
00:12:07,720 --> 00:12:11,260
And here I'm going to say like this we want to say that I'm going to be looking first of all for the

198
00:12:11,260 --> 00:12:17,710
book because this is gonna be one of the key value pairs that I'm going to be looking also for the author.

199
00:12:17,770 --> 00:12:19,140
And then from where.

200
00:12:19,240 --> 00:12:25,260
Well we have these dot wraps and then we're going to be looking for the book and I'm going to save it.

201
00:12:25,540 --> 00:12:32,260
And what I would like to do right now is use the power of J sex where I can insert the variables and

202
00:12:32,260 --> 00:12:37,360
I'm going to say this is going to be my book and this is going to be my author.

203
00:12:37,360 --> 00:12:38,650
So far so good.

204
00:12:39,040 --> 00:12:40,910
Everything is working out really well.

205
00:12:41,020 --> 00:12:48,310
I have the book book number one and an author who is going to be John Doe or something like.

206
00:12:48,780 --> 00:12:49,810
OK.

207
00:12:50,050 --> 00:12:52,810
Everything is really really awesome.

208
00:12:52,810 --> 00:12:59,460
But there is quite a few issues as we're going to be working with this kind of setup and you know what

209
00:12:59,770 --> 00:13:05,740
actually we can close the book as well because all our attention right now is gonna be to this guy to

210
00:13:05,740 --> 00:13:09,660
the famous book list because this is we're all gonna be setting up to stay.

211
00:13:10,030 --> 00:13:11,740
And what would be the issue.

212
00:13:12,430 --> 00:13:13,090
Well OK.

213
00:13:13,120 --> 00:13:14,640
So let's say we have two items here.

214
00:13:14,640 --> 00:13:14,910
Right.

215
00:13:14,910 --> 00:13:16,840
So I'm gonna copy and paste it.

216
00:13:16,840 --> 00:13:23,350
I'm gonna say that in this case I'm not going to be accessing the book's value of zero meaning the zero

217
00:13:23,400 --> 00:13:26,690
next thing that I'm gonna be accessing the one.

218
00:13:26,710 --> 00:13:27,190
Okay.

219
00:13:27,210 --> 00:13:28,090
So far so good.

220
00:13:28,120 --> 00:13:34,990
So I have right now book number one then that would be John Doe then book number two is gonna be Bobby.

221
00:13:35,230 --> 00:13:35,580
No.

222
00:13:35,690 --> 00:13:36,760
Okay so far so good.

223
00:13:37,090 --> 00:13:42,480
So let's say I'm gonna add here one to say one more and this is not what I wanted.

224
00:13:43,030 --> 00:13:45,410
So let's say again we're gonna select them.

225
00:13:45,840 --> 00:13:52,030
I'm going to copy and paste it in this case though we did copy paste it one more time then this would

226
00:13:52,030 --> 00:13:58,240
be book number three as well as this would be I don't know Peter doe something like this.

227
00:13:58,240 --> 00:14:00,270
Peter going to save it.

228
00:14:00,750 --> 00:14:05,790
Well this is I was not showing so I wouldn't ask your question what we would do next.

229
00:14:06,440 --> 00:14:11,560
Well you would say OK so we'll just gonna go on say book number by the index value.

230
00:14:12,380 --> 00:14:14,700
And you would be correct in this case.

231
00:14:15,240 --> 00:14:20,540
However imagine the scenario you're getting something from the API and you don't know how many of them.

232
00:14:20,590 --> 00:14:25,520
If you have five you have five thousand you have three you have thirty three thousand.

233
00:14:25,520 --> 00:14:26,540
It doesn't really matter.

234
00:14:26,610 --> 00:14:28,650
But this is not sustainable.

235
00:14:28,710 --> 00:14:32,270
I mean you're gonna go crazy if yours is gonna be really hand coding everything.

236
00:14:32,370 --> 00:14:34,230
So there has to be a better way.

237
00:14:34,290 --> 00:14:40,290
We have to be able to access the state regardless of where there is one item whether it's 10 items whether

238
00:14:40,290 --> 00:14:46,410
it's fifty five items and we need to be able to render them all or maybe render I don't know the first

239
00:14:46,410 --> 00:14:53,670
three on so on and so forth and this hand calling I'm sorry my friends it's really really gonna mess

240
00:14:53,670 --> 00:14:54,340
you up.

241
00:14:54,450 --> 00:14:55,890
So how I can do this.

242
00:14:55,890 --> 00:14:58,740
Well I already kind of mentioned that we have a state right.

243
00:14:59,280 --> 00:15:01,130
So why don't we change this all around the globe.

244
00:15:01,770 --> 00:15:08,580
So within the class instead of having just these books I'm gonna create my state now for the state.

245
00:15:08,580 --> 00:15:10,330
Again this is important.

246
00:15:10,410 --> 00:15:12,840
This is a syntax and you need to follow the syntax.

247
00:15:13,200 --> 00:15:14,580
So the state would be like this.

248
00:15:14,580 --> 00:15:20,610
So when I write this state keyword then I'm going to set this equal to again I'm still working within

249
00:15:20,970 --> 00:15:22,230
my class.

250
00:15:22,260 --> 00:15:24,180
However this is gonna be my object.

251
00:15:24,330 --> 00:15:30,930
So I'm sitting here that this would be a object and this is gonna be in a lot of sense the same as regular

252
00:15:30,930 --> 00:15:36,510
javascript object meaning it gonna have the key value pairs and all that because obviously regular JavaScript

253
00:15:36,510 --> 00:15:38,310
objects don't have this that's at stake.

254
00:15:38,820 --> 00:15:44,850
But in general this syntax is gonna be like this where we have these curly braces and now we can place

255
00:15:44,910 --> 00:15:47,040
everything within the state.

256
00:15:47,100 --> 00:15:47,580
Okay.

257
00:15:47,630 --> 00:15:53,040
So if we can place everything within a state why don't we grab the box why don't we say here like this

258
00:15:53,550 --> 00:15:55,130
and we're going to copy and it.

259
00:15:55,190 --> 00:16:00,930
However the key here is that obviously we are already operating an object and we know that for the key

260
00:16:00,930 --> 00:16:04,070
value pairs we do need to have the code.

261
00:16:04,560 --> 00:16:06,580
Because that would be the syntax for the apt.

262
00:16:07,080 --> 00:16:13,040
So I can say it nicely this application right now is gonna break because that doesn't make sense.

263
00:16:13,140 --> 00:16:17,480
And the reason why doesn't make sense first of all because we don't have the.

264
00:16:17,490 --> 00:16:19,550
Some are calling and we shouldn't have the same icon.

265
00:16:19,620 --> 00:16:23,370
So now we're gonna save it but we cannot access the values.

266
00:16:23,460 --> 00:16:30,210
So even though I fixed my syntax error it says this that books and we don't have the books anymore we

267
00:16:30,210 --> 00:16:30,870
have the state.

268
00:16:31,470 --> 00:16:32,760
So we would need to fix it.

269
00:16:33,470 --> 00:16:34,000
Okay.

270
00:16:34,050 --> 00:16:38,360
So your question probably would be well why we just couldn't leave the array.

271
00:16:38,370 --> 00:16:44,070
It was working fine so why we grab this kind of state and I guess the reason why we're using the state

272
00:16:44,550 --> 00:16:50,610
is because we can control the state and we have special methods that can mutate the state that can change

273
00:16:50,610 --> 00:16:54,770
the state and that not are gonna affect the performance.

274
00:16:54,780 --> 00:16:58,140
So that's the reason why are we using the actual keyword.

275
00:16:58,140 --> 00:17:04,440
That's the reason why we're not just using some regular monkey wrench array and then just you know we're

276
00:17:04,440 --> 00:17:05,130
good.

277
00:17:05,130 --> 00:17:08,850
No we do need to use the state because we would want to control it later on.

278
00:17:09,150 --> 00:17:13,570
And again I'm just going to make a comment here because we're gonna be using something like this this

279
00:17:13,630 --> 00:17:21,320
that state this is very very important because this is something that really gives an OK.

280
00:17:21,390 --> 00:17:28,180
So where we're going from now no Okay I'm looking at the state and I can see that I have state and within

281
00:17:28,180 --> 00:17:33,290
the state I have the key value pair with books and books as an array not k.

282
00:17:33,480 --> 00:17:40,540
And I also know that I have the render method and above the return I can do whatever javascript I would

283
00:17:40,540 --> 00:17:40,750
want.

284
00:17:41,260 --> 00:17:42,430
So why don't we do this.

285
00:17:42,520 --> 00:17:45,540
Why don't we get rid of this for now and later on we're going to fix it.

286
00:17:45,540 --> 00:17:46,290
Don't worry.

287
00:17:46,360 --> 00:17:49,790
But for now let's say that we're not going to be looking for this book.

288
00:17:50,070 --> 00:17:50,980
And you know what.

289
00:17:51,100 --> 00:17:58,060
Yeah why don't we take a look at the simple javascript method that we can have it on the right and the

290
00:17:58,060 --> 00:18:03,590
way we access it first of all these books is again this dot because we are within the class.

291
00:18:03,620 --> 00:18:08,590
So we need to point to the instance and then we're saying this that state and then we're looking for

292
00:18:08,590 --> 00:18:09,440
this valley.

293
00:18:09,460 --> 00:18:11,320
So first of all it's very simple.

294
00:18:11,320 --> 00:18:14,410
Let's say concert and this is going to be my books.

295
00:18:14,440 --> 00:18:18,310
And in this case I'm going to say this not because I'm accessing here.

296
00:18:18,580 --> 00:18:20,520
This is actually not in props.

297
00:18:20,560 --> 00:18:24,040
This is not something that we're passing down any props in this case.

298
00:18:24,040 --> 00:18:29,050
We're just saying this that state and then we're looking for the books and this is gonna be for all

299
00:18:29,050 --> 00:18:30,650
your properties that you have an estate.

300
00:18:31,240 --> 00:18:36,280
Only thing you're gonna be doing is you're gonna be looking for is that state and then you're going

301
00:18:36,280 --> 00:18:39,420
to be looking for whatever you have value in the actual state.

302
00:18:39,780 --> 00:18:40,530
Okay.

303
00:18:40,630 --> 00:18:45,280
And as I said we don't care about the books obviously this is gonna break.

304
00:18:45,340 --> 00:18:50,160
Now the reason why this is gonna break because obviously we're looking for these vulnerable.

305
00:18:50,440 --> 00:18:52,640
So why don't we common demand for now.

306
00:18:52,810 --> 00:18:55,380
Because why don't we set them up first.

307
00:18:55,540 --> 00:18:59,150
Everything within a state and then holds is going to deal with these values.

308
00:18:59,230 --> 00:19:04,000
But what I would like to do right now is just to show you how are things working going to be looking

309
00:19:04,000 --> 00:19:04,970
at the books.

310
00:19:04,990 --> 00:19:11,710
So if I come and decide what do you see here here on the top in a console I can clearly see that I am

311
00:19:11,710 --> 00:19:16,280
looking for my books so I can have access to the Internet.

312
00:19:16,690 --> 00:19:17,900
So that's already a good sign.

313
00:19:18,190 --> 00:19:21,090
Now okay so if I have all right.

314
00:19:21,250 --> 00:19:22,640
All right has what.

315
00:19:22,950 --> 00:19:26,770
It has method methods can be multiple methods.

316
00:19:26,770 --> 00:19:27,340
We can.

317
00:19:27,340 --> 00:19:34,800
I don't know split array we can mutate array or whatever but there is a really really nice.

318
00:19:34,800 --> 00:19:42,220
Methods that are using higher functions so higher class functions where we can pass the function in

319
00:19:42,220 --> 00:19:45,020
the method what methods I'm talking about.

320
00:19:45,040 --> 00:19:52,580
Well we have a filter we have for each for each.

321
00:19:52,600 --> 00:19:54,970
Then we also have map.

322
00:19:54,970 --> 00:19:56,890
Then we also have redos.

323
00:19:57,550 --> 00:20:03,340
And if you're not aware of them I can tell you right away within the react this is going to be your

324
00:20:03,340 --> 00:20:04,620
bread and butter.

325
00:20:04,660 --> 00:20:09,000
This is gonna be something that you're gonna be doing all now.

326
00:20:09,190 --> 00:20:09,520
Yeah.

327
00:20:09,520 --> 00:20:14,340
For each might be in a one off or whatever but filter and map.

328
00:20:14,380 --> 00:20:14,950
Yeah.

329
00:20:14,980 --> 00:20:18,020
If you're not aware of them you don't know how to use them.

330
00:20:18,040 --> 00:20:23,490
I would suggest spending at least I don't know 5 10 minutes and looking at the syntax and the way they

331
00:20:23,500 --> 00:20:29,230
work because this is something that you will gonna use a lot because you're gonna be iterating through

332
00:20:29,230 --> 00:20:32,710
some lists and map is a very nifty.

333
00:20:32,710 --> 00:20:38,770
Now what's common for all of them that we have the method and we're going to be passing some kind of

334
00:20:38,770 --> 00:20:44,230
function or we can just write the anonymous function but then what they do is they apply this function

335
00:20:44,620 --> 00:20:47,050
to each and every item in your list.

336
00:20:47,050 --> 00:20:52,510
In our case this would be the book and filter is just gonna make sure that we are returning only certain

337
00:20:52,510 --> 00:20:53,190
values.

338
00:20:53,320 --> 00:20:57,190
Map allows us to change them around a little bit.

339
00:20:57,340 --> 00:21:02,310
So in our case what we're gonna do is we all gonna return this item wrapped in a J sex.

340
00:21:02,350 --> 00:21:05,730
That's the real power in the actual react.

341
00:21:05,770 --> 00:21:10,810
And by the way again this is a lot of JavaScript only thing that's coming from react is the fact that

342
00:21:10,810 --> 00:21:17,080
we're going to be wrapping this in the J sex but everything else is plain old simple child's script.

343
00:21:17,350 --> 00:21:23,110
So why don't we take a stab at the map and I think this is just going to be the easiest one where we

344
00:21:23,110 --> 00:21:24,280
can start working.

345
00:21:24,580 --> 00:21:26,380
And I'm just gonna show you with an example.

346
00:21:26,830 --> 00:21:32,580
So I have this that state box this is gonna be my array then I'm gonna be looking for my method and

347
00:21:32,590 --> 00:21:39,610
I'm gonna say map method no math method is gonna look for one argument and that argument is gonna be

348
00:21:39,610 --> 00:21:47,110
the function I can write this function outside of whatever this method of math or I can just pass it

349
00:21:47,110 --> 00:21:54,520
here has a unanimous function which is really cool because as we working with the S6 the arrow functions

350
00:21:54,840 --> 00:21:58,440
we can just have a very clean and short syntax.

351
00:21:58,450 --> 00:22:03,480
Now what this is gonna do is I'm gonna say that this is gonna be my function so that's gonna be my hero

352
00:22:03,490 --> 00:22:04,080
function.

353
00:22:04,180 --> 00:22:10,730
And then again I'm doing the implicit return and then whatever I'm naming here this parameter is going

354
00:22:10,730 --> 00:22:15,810
to look at the list and it's going to reflect each and every item in the list.

355
00:22:16,180 --> 00:22:20,110
So I'm saying as you're looping through I wouldn't want to do something with this item.

356
00:22:20,140 --> 00:22:26,860
Now this item can be an orange again this naming doesn't matter because this just talks about each and

357
00:22:26,860 --> 00:22:28,020
every item in a.

358
00:22:28,270 --> 00:22:30,370
And in this case I'm just naming this item.

359
00:22:30,580 --> 00:22:33,840
But there is no rule that you need to name this item.

360
00:22:33,940 --> 00:22:38,710
And since I know that I'm looping through the list and I'm going to be looking for the book why don't

361
00:22:38,710 --> 00:22:41,030
we take a look at how we can create one book.

362
00:22:41,410 --> 00:22:43,530
So let's say in this case I'm going to say OK.

363
00:22:43,630 --> 00:22:48,430
So I'd like to loop through an array and then I'm going to say that I'm going to be looking for the

364
00:22:48,430 --> 00:22:48,700
book.

365
00:22:49,060 --> 00:22:53,890
Well I don't know why I'm typing name but let me write a book because I know that each and every object

366
00:22:53,890 --> 00:22:55,750
here is gonna have this book.

367
00:22:55,750 --> 00:22:57,120
So why don't we say this.

368
00:22:57,280 --> 00:23:02,400
And again we would want to console log it which probably I don't know why I actually delete it.

369
00:23:02,440 --> 00:23:03,970
So let me say this again.

370
00:23:03,970 --> 00:23:05,470
And now what do I have in my right.

371
00:23:05,740 --> 00:23:12,850
So instead of just a simple books array which would be all the items what I can do is I can start manipulating

372
00:23:12,850 --> 00:23:14,960
these values so I can say you know what.

373
00:23:14,950 --> 00:23:15,580
Yeah.

374
00:23:15,610 --> 00:23:22,180
Loop through all my array what I have however returned from the array grab the item and only return

375
00:23:22,180 --> 00:23:29,000
the book that is on this item and this up in the books and by the way one more thing that's happening

376
00:23:29,000 --> 00:23:29,850
here.

377
00:23:30,140 --> 00:23:35,870
Apart from for each is that they were going to create a new array for each is not going to create in

378
00:23:35,860 --> 00:23:41,640
your age is going to loop through an array and do something whether that's console log the most simplest

379
00:23:41,780 --> 00:23:47,060
solo or something like that but with the filter and mapping of use we are creating new arrays.

380
00:23:47,090 --> 00:23:50,000
You can clearly see that we have the books all right.

381
00:23:50,030 --> 00:23:51,950
And then we created the new right.

382
00:23:52,250 --> 00:23:58,760
Now the key here is very very important and that is the fact that we can wrap this not just this book

383
00:23:58,760 --> 00:23:59,660
number one.

384
00:23:59,660 --> 00:24:05,410
Like I said we can wrap this in the J sex that is really really powerful.

385
00:24:05,570 --> 00:24:10,490
Or we can just return this as a total item.

386
00:24:10,550 --> 00:24:12,330
So let's say I'm just looking for the book.

387
00:24:12,440 --> 00:24:16,640
So why do I want to combine this and just say that I want to return the item.

388
00:24:16,640 --> 00:24:20,540
So how is that going to work well why don't we combine the both.

389
00:24:20,540 --> 00:24:22,510
So I know that I have my math method.

390
00:24:22,690 --> 00:24:26,910
I know I can look for a specific part in here.

391
00:24:27,290 --> 00:24:29,250
Why don't I come in this out.

392
00:24:29,250 --> 00:24:31,300
Again this is just gonna be for your reference.

393
00:24:31,430 --> 00:24:33,580
And now let's start working with the books.

394
00:24:33,590 --> 00:24:35,460
However for now I don't need the book.

395
00:24:35,690 --> 00:24:41,960
What I need is to set up a javascript because I'm gonna be looking for the javascript functionality.

396
00:24:41,990 --> 00:24:46,870
So here I'm going to say this that I'm looking for the state that I'm looking for the box is gonna be

397
00:24:46,880 --> 00:24:49,670
my right and then I'm going to be looking again for the map.

398
00:24:50,390 --> 00:24:53,420
Now in this case I will gonna have the item.

399
00:24:53,420 --> 00:24:54,970
So that's going to be my first thing.

400
00:24:55,130 --> 00:24:57,790
But also I can have the access to the index.

401
00:24:57,830 --> 00:25:00,040
This is gonna be again specific to the math.

402
00:25:00,260 --> 00:25:05,510
Again in this case I was going to show you this little little bit later on when we're going to use the

403
00:25:05,510 --> 00:25:05,900
index.

404
00:25:05,930 --> 00:25:10,490
And in fact I'm going to tell you right away that that is probably not something that you're going to

405
00:25:10,490 --> 00:25:16,160
use very often because there are some downsides to it but just as a very simple way I do want to show

406
00:25:16,160 --> 00:25:16,800
you this.

407
00:25:16,940 --> 00:25:20,930
I'm going to say that I'm going to be looking for the item so each and every item in the array as well

408
00:25:20,930 --> 00:25:22,040
as the index for design.

409
00:25:22,490 --> 00:25:25,920
And that what I would want here as my result.

410
00:25:25,940 --> 00:25:31,500
Well I want to say that for each and every item I'm gonna be returning the book.

411
00:25:31,510 --> 00:25:32,720
So this is important.

412
00:25:32,750 --> 00:25:39,710
So now I'm returning not only some whatever simple book number one and number number two what I am returning

413
00:25:39,710 --> 00:25:41,960
is the actual component.

414
00:25:41,960 --> 00:25:47,510
And then within the component I'm going to set the prop of let's say the name of rainfall and then within

415
00:25:47,510 --> 00:25:50,040
this info I'm going to say that this is going to be the item.

416
00:25:50,480 --> 00:25:55,820
So what I'm saying is I'm gonna loop through an array I'm going to start with Book Number One Number

417
00:25:55,820 --> 00:25:56,890
Two Number Three.

418
00:25:57,050 --> 00:26:02,740
And each and every iteration I'm going to create a component and then within this component we're going

419
00:26:02,740 --> 00:26:09,310
to pass the info up and this info prob is gonna grab all the information that was already in it.

420
00:26:09,380 --> 00:26:14,750
However once I might say that there's going to be a error in the console and even though everything

421
00:26:14,750 --> 00:26:20,570
is going to be working fine I also need to change the book because remember when we were setting this

422
00:26:20,570 --> 00:26:25,100
up we initially had this book and I was like This is not going to be in our props anymore.

423
00:26:25,130 --> 00:26:29,510
What we need to do is change this to a more famous info.

424
00:26:29,900 --> 00:26:31,220
So now what I'm saying.

425
00:26:31,310 --> 00:26:35,640
And honestly I didn't say it here in the book list then I should be having what.

426
00:26:35,810 --> 00:26:37,810
Well first of all I have this big massive morning.

427
00:26:37,870 --> 00:26:39,640
And like I said we were gonna be dealing with this.

428
00:26:39,650 --> 00:26:40,670
No worry about it.

429
00:26:40,730 --> 00:26:42,070
And by the way I didn't.

430
00:26:42,110 --> 00:26:47,410
I messed up here come into doubt for some reason but everything is rendered fine.

431
00:26:47,480 --> 00:26:52,880
And what's really cool about this apart from this big fat error is the fact that now we can do something

432
00:26:52,880 --> 00:26:53,720
like this.

433
00:26:53,810 --> 00:26:54,990
You want more items.

434
00:26:55,210 --> 00:26:56,270
Okay let's go ahead.

435
00:26:56,280 --> 00:26:57,920
No I'm not going to be changing these values.

436
00:26:57,920 --> 00:26:59,740
I see this as pointless thing.

437
00:26:59,750 --> 00:27:03,040
But let's say I could have had more of what I use again.

438
00:27:03,050 --> 00:27:07,420
So let's say karma karma karma.

439
00:27:07,450 --> 00:27:08,920
So that will be the proper syntax.

440
00:27:08,920 --> 00:27:11,050
What more do I have right now.

441
00:27:11,180 --> 00:27:14,180
Well I have a bunch of books you delete them.

442
00:27:14,360 --> 00:27:14,850
Sure.

443
00:27:14,860 --> 00:27:15,950
Delete them.

444
00:27:15,950 --> 00:27:23,230
So as you can see right now this is much much more powerful where I can control what is being rendered

445
00:27:23,650 --> 00:27:28,740
by obviously having this component but then whatever values I'm gonna be getting back.

446
00:27:28,840 --> 00:27:35,200
This is already dynamic and we are not doing any more of my friends the typical hard coding or anything

447
00:27:35,200 --> 00:27:35,930
like that.

448
00:27:35,980 --> 00:27:41,710
We are very smart because now we're making sure that no whatever books we're gonna have all of them

449
00:27:41,710 --> 00:27:46,990
are going to be rendered unless obviously you set up some kind of I don't know cancellation or something

450
00:27:46,990 --> 00:27:52,630
like that but unless you do that yes all of them are gonna be rendered and you don't need to jump back

451
00:27:52,630 --> 00:27:55,590
and forth and change the values now you set it up.

452
00:27:55,660 --> 00:28:00,490
If there's gonna be more books fine we're gonna be getting more books and there's gonna be less fine.

453
00:28:00,550 --> 00:28:01,630
That also works for us.

454
00:28:02,050 --> 00:28:04,330
So that is much much more powerful.

455
00:28:04,330 --> 00:28:06,620
Trust me because hand coding like that.

456
00:28:06,700 --> 00:28:12,490
That's not very smart that you let me come down from my emotional high and why don't we talk about it.

457
00:28:12,700 --> 00:28:18,670
So why do we need to see what they're saying in the console is that each child in list should have a

458
00:28:18,670 --> 00:28:24,730
unique and what's happening is that we act needs to keep track of what list is being rendered.

459
00:28:24,820 --> 00:28:28,120
Because like I said later on we're going to work with the events we're gonna be changing something.

460
00:28:28,600 --> 00:28:34,870
So what we need to do is to have a special again prop which is gonna be the key now for the key we need

461
00:28:34,870 --> 00:28:39,940
to pass something unique which in our case we could technically pass index and everything is gonna be

462
00:28:39,940 --> 00:28:42,460
working fine and nothing is gonna change.

463
00:28:42,460 --> 00:28:45,050
Meaning there's gonna be nowhere in the console.

464
00:28:45,230 --> 00:28:50,230
However there is an issue with an index that is the simple fact that yeah if there is gonna be a less

465
00:28:50,230 --> 00:28:51,850
than nothing is gonna be changing.

466
00:28:51,850 --> 00:28:55,380
You technically could leave the index and everything wouldn't be fine.

467
00:28:55,430 --> 00:28:58,940
How has it all gonna be deleting some items from the list.

468
00:28:58,990 --> 00:29:01,090
It might give you a hard time.

469
00:29:01,120 --> 00:29:02,710
And the reason is very simple.

470
00:29:02,770 --> 00:29:04,070
We're setting up the index.

471
00:29:04,120 --> 00:29:06,370
So imagine if I delete this one.

472
00:29:06,610 --> 00:29:08,440
What is gonna be the index right now.

473
00:29:08,440 --> 00:29:12,860
Well this guy already doesn't have the next number one like it normally would.

474
00:29:12,880 --> 00:29:17,400
Now this one has the zero so that's probably not the best way how you should do it.

475
00:29:17,500 --> 00:29:22,270
And by the way if you're gonna be getting some kind of information from external API they most likely

476
00:29:22,270 --> 00:29:24,010
are going to give you the ideas anyway.

477
00:29:24,010 --> 00:29:30,130
But in this case the simple and quick and dirty way would be something like this where we just set up

478
00:29:30,130 --> 00:29:30,810
the idea.

479
00:29:31,060 --> 00:29:34,480
Now in this case what I can do is I can not look for the index.

480
00:29:34,530 --> 00:29:40,150
Let me just delete this even though hopefully you understand that you can do that and instead of index

481
00:29:40,270 --> 00:29:46,840
since we can access the item and say item and we're looking for the 80 is actually that is the key value

482
00:29:46,840 --> 00:29:47,590
pair.

483
00:29:47,590 --> 00:29:51,610
Now let me say it and again you see that there is no errors in console.

484
00:29:51,610 --> 00:29:53,290
So everything is working out fine.

485
00:29:53,380 --> 00:30:00,430
So for the key we need to use something unique which is going to be in most cases ideas which from the

486
00:30:00,430 --> 00:30:04,980
external API you will gonna be getting most likely the I.D. or if you're creating your own list.

487
00:30:04,990 --> 00:30:07,320
You can just make your own IP.

488
00:30:07,360 --> 00:30:08,400
It doesn't really matter.

489
00:30:08,410 --> 00:30:10,480
It's gonna do the same thing.

490
00:30:10,630 --> 00:30:17,320
And then last but not least this is the important part where we using the map and state allows us to

491
00:30:17,320 --> 00:30:22,540
really have a lot of control of how everything is gonna be rendered and later on we're going to see

492
00:30:22,540 --> 00:30:29,920
how we can actually change these values so we can either remove something or add something and this

493
00:30:29,920 --> 00:30:37,210
gives us much much more dynamic applications than just some kind of simple array and then we're just

494
00:30:37,210 --> 00:30:39,850
hard coding everything of what is gonna be rendered.