1
00:00:00,480 --> 00:00:07,850
As we're covering the methods the sad state as well as working in general with some kind of click event.

2
00:00:07,950 --> 00:00:14,450
Why don't we also cover the poor up drilling as well as passing methods to the children.

3
00:00:14,460 --> 00:00:20,550
I'm calling this prop drilling meaning I didn't name this prop drilling but we can do it with the props

4
00:00:20,640 --> 00:00:22,320
as well as with the method.

5
00:00:22,650 --> 00:00:29,580
We all to look at the example as we're passing down the method from the parent all the way to a child.

6
00:00:29,860 --> 00:00:35,520
However understand that you can also do this obviously with the props and that is one of the names that's

7
00:00:35,550 --> 00:00:38,870
being used where this is being called Prop drilling.

8
00:00:38,870 --> 00:00:40,360
And what do I mean by this.

9
00:00:40,360 --> 00:00:43,170
Well first of all let me create another component.

10
00:00:43,380 --> 00:00:48,470
And what I would like to do actually in this case delete everything that we have here with the buttons.

11
00:00:48,660 --> 00:00:49,970
We don't need it anymore.

12
00:00:50,100 --> 00:00:52,870
And this is just going to be on our way a little bit.

13
00:00:53,010 --> 00:00:56,130
And I think it's just gonna confuse us more than anything.

14
00:00:56,160 --> 00:01:02,070
So let me get rid of the counts and names and all that and what I would like to do instead is to create

15
00:01:02,070 --> 00:01:09,570
another button that's gonna be child for my book and then I would like to pass the data from the book

16
00:01:09,570 --> 00:01:11,430
list that we know we have and you know what.

17
00:01:11,430 --> 00:01:17,790
By the way I can close this guy as well as this one and then pass it some kind of method where I can

18
00:01:17,790 --> 00:01:24,480
click all the way from the book list to the book as well as to the button that I'm gonna be passing

19
00:01:24,480 --> 00:01:25,500
here right now.

20
00:01:25,500 --> 00:01:26,760
So why don't we start like this.

21
00:01:26,760 --> 00:01:27,650
When we say OK.

22
00:01:27,660 --> 00:01:29,210
There's going to be you file.

23
00:01:29,250 --> 00:01:32,660
I'm just gonna call this button J so it doesn't really matter what you call it.

24
00:01:32,740 --> 00:01:37,710
And then here I'm gonna say that I would like to have the functional component so I know that I can

25
00:01:37,710 --> 00:01:41,790
type 3 1/2 C since in this case we're just gonna be getting props.

26
00:01:41,790 --> 00:01:43,670
We don't really care about it anyway.

27
00:01:43,810 --> 00:01:48,720
Then in this case we're not going to be getting the div instead of we're gonna be returning the button

28
00:01:49,170 --> 00:01:55,510
and let just right delete me at this point we're not gonna set up the functionality for deletion rules

29
00:01:55,550 --> 00:02:02,640
and say delete and delete me and then we're gonna say that for this button I would like to add a little

30
00:02:02,640 --> 00:02:03,470
bit of styling.

31
00:02:03,690 --> 00:02:10,470
And you know what maybe before the styles are just the proper attributes for Rachel's emails this would

32
00:02:10,470 --> 00:02:11,610
be button.

33
00:02:11,700 --> 00:02:14,510
And I think I can close the sidebar by the way.

34
00:02:14,670 --> 00:02:17,220
And here I'm going to say Mm hmm.

35
00:02:17,490 --> 00:02:23,220
I would want some kind of style and let's do a little bit of inline styling so let's say we could have

36
00:02:23,220 --> 00:02:25,350
maybe background.

37
00:02:25,380 --> 00:02:26,140
You know what.

38
00:02:26,190 --> 00:02:27,630
Let me get it back.

39
00:02:27,630 --> 00:02:30,200
Background is gonna be red.

40
00:02:30,210 --> 00:02:36,660
Color is gonna be white and we can also do maybe font size and you know what I am already making theirs

41
00:02:36,910 --> 00:02:42,900
is remember this was javascript so I was telling you that you shouldn't do it but obviously first thing

42
00:02:42,900 --> 00:02:45,220
that I do I keep writing as an error.

43
00:02:45,330 --> 00:02:48,280
We need to write white here because that would be my color.

44
00:02:48,450 --> 00:02:55,580
And then let's shoot for I don't know font size like two or three times so let's say to our aim.

45
00:02:55,590 --> 00:03:01,230
So this is gonna remember obviously at the moment nothing is showing how since we are exporting as a

46
00:03:01,230 --> 00:03:07,170
default I can head over back to the book and I can say here up on the top and I'm going to be importing

47
00:03:07,170 --> 00:03:13,080
the button so I can just call this button from and then I'm gonna be looking for the same folder of

48
00:03:13,080 --> 00:03:13,800
course.

49
00:03:13,920 --> 00:03:17,540
And this is where I'm going to have my bought tons.

50
00:03:17,550 --> 00:03:17,910
Mm hmm.

51
00:03:18,090 --> 00:03:18,360
Okay.

52
00:03:18,360 --> 00:03:20,190
So I named my five buttons.

53
00:03:20,190 --> 00:03:20,980
Fair enough.

54
00:03:21,030 --> 00:03:26,380
I was shooting for a button but I mean this is probably as good as it's gonna get.

55
00:03:26,460 --> 00:03:34,300
And then somewhere here let's say after the hearing six why don't we actually rendered.

56
00:03:34,970 --> 00:03:37,190
What do we have a look of what do we have here.

57
00:03:37,200 --> 00:03:38,530
So let me say this.

58
00:03:38,580 --> 00:03:43,880
And sure enough I have a big nice button that at the moment doesn't do anything.

59
00:03:44,040 --> 00:03:49,320
And here's my plan and for this I was gonna go back again to the reactors so I'm gonna make this bigger

60
00:03:49,740 --> 00:03:56,730
and we're going to look for inspection and we're gonna be looking for the reactors which are hiding

61
00:03:56,730 --> 00:04:01,440
in this case and then I'm gonna show you where we're gonna be passing the information.

62
00:04:01,440 --> 00:04:03,040
So this is my plan.

63
00:04:03,090 --> 00:04:09,450
We have the book list and then within the book list we have the section then within the section we have

64
00:04:09,450 --> 00:04:10,700
each and every book.

65
00:04:10,920 --> 00:04:15,160
Now each and every book right now is rendering the button that we have.

66
00:04:15,600 --> 00:04:21,780
So my idea is pass it on the book list to the book as well as later on.

67
00:04:21,780 --> 00:04:23,320
We're gonna pass it to the bottom.

68
00:04:23,490 --> 00:04:31,080
So that's my plan and as I'm doing this I'm gonna show you what would be the difference as we were actually

69
00:04:31,350 --> 00:04:34,710
accessing the method that is not in the same component.

70
00:04:35,070 --> 00:04:40,470
However this is gonna be not only the child component but it would obviously work the same the child

71
00:04:40,480 --> 00:04:41,330
come on.

72
00:04:41,470 --> 00:04:44,130
This is could be a grandchild component technically.

73
00:04:44,180 --> 00:04:49,350
Well what you're seeing is we have one parent that I'm passing through the child and then I'm gonna

74
00:04:49,350 --> 00:04:51,700
pass down to this button.

75
00:04:51,750 --> 00:04:57,630
So this is why it is called prob drilling because you technically are drilling the props and by the

76
00:04:57,630 --> 00:05:04,570
way by the way again we're skipping a bit of head but in general this is why you start using something

77
00:05:04,570 --> 00:05:09,280
like redux or something like context API.

78
00:05:09,370 --> 00:05:16,060
Well maybe not this particular example Don't get me wrong but this whole idea where you're passing data

79
00:05:16,060 --> 00:05:22,390
down sometimes gets really annoying because what's happening is that let's say you have component that

80
00:05:22,390 --> 00:05:27,270
is five components deep that really gets tiresome really fast.

81
00:05:27,610 --> 00:05:31,450
So that's the reason why you come up with those solutions or not you.

82
00:05:31,460 --> 00:05:36,640
That's the reason why they came up with those solutions where you can get data straight from some kind

83
00:05:36,640 --> 00:05:40,620
of parent all the way down here without passing the book.

84
00:05:40,690 --> 00:05:47,680
But what we all gonna look at is the normal case where if you want let's say this button to have some

85
00:05:47,680 --> 00:05:53,050
kind of method or some kind of prop that is sitting here with then book list we do need to pass it through

86
00:05:53,050 --> 00:05:57,460
the book and that's gonna be kind of important and you will see how this is gonna be happening again.

87
00:05:57,640 --> 00:06:03,310
I skipped a little bit I've had of course the moment we're going to start work talking about the context

88
00:06:03,310 --> 00:06:09,250
API I'm going to revisit this a little bit and all that but just to kind of give you a heads up that

89
00:06:09,590 --> 00:06:14,380
has you passing something now on some kind of information you will going to have to go through the book

90
00:06:14,410 --> 00:06:21,130
because this is technically or not technically this is a parent element for the button anyway after

91
00:06:21,130 --> 00:06:26,860
five minutes of me talking and talking why don't we head over back to the book list and now let's create

92
00:06:26,920 --> 00:06:28,200
our method we know.

93
00:06:28,210 --> 00:06:28,500
Okay.

94
00:06:28,510 --> 00:06:30,310
So this would be my book list.

95
00:06:30,310 --> 00:06:33,700
I mean we already aware of the state so I think I can delete that.

96
00:06:33,870 --> 00:06:35,680
And why don't we say this.

97
00:06:35,680 --> 00:06:39,720
Why don't we say handle and handle delete.

98
00:06:39,760 --> 00:06:41,410
This is just gonna be my math.

99
00:06:41,440 --> 00:06:46,910
Now I'm going to set it up as an oral function and for now let's do very simply let's just write and

100
00:06:46,930 --> 00:06:48,660
this would be the quote curly braces.

101
00:06:48,670 --> 00:06:51,420
But obviously you can write it however you like.

102
00:06:51,520 --> 00:06:53,350
You don't need to use the curly braces.

103
00:06:53,450 --> 00:07:02,260
But here I'm going to say console log and we're going to say I am or you know what let's use the actual

104
00:07:02,920 --> 00:07:11,200
template liberals and I say I am from technically parent container but you understand that this would

105
00:07:11,200 --> 00:07:20,830
be a grandparent parent come pone and component and we already know that if this is in the same component

106
00:07:21,040 --> 00:07:22,240
it's very easy.

107
00:07:22,240 --> 00:07:28,510
The only thing I would need to do if I would want to click it here I would need to set up whatever element

108
00:07:28,540 --> 00:07:29,380
I would want.

109
00:07:29,380 --> 00:07:33,580
And now we're just attached one click and we're going to pass it by the reference.

110
00:07:33,580 --> 00:07:35,920
Remember we did this already in the book.

111
00:07:35,920 --> 00:07:37,110
It's not a big deal.

112
00:07:37,120 --> 00:07:40,810
We have covered it over now it's a little bit more interesting.

113
00:07:40,870 --> 00:07:45,300
I would like to parse this handled delete the first rule book.

114
00:07:45,310 --> 00:07:47,390
So how do we do this.

115
00:07:47,590 --> 00:07:53,140
Because even though we had some kind of buttons here there's no way for me to access that method right

116
00:07:53,140 --> 00:07:54,030
now.

117
00:07:54,070 --> 00:07:58,670
I cannot just call somewhere here let's say on a heading then I'm gonna say on click.

118
00:07:58,840 --> 00:08:03,340
And then on click I'm going to be saying handle late because that method doesn't exist.

119
00:08:03,340 --> 00:08:06,560
I cannot say there's that and we cannot do that.

120
00:08:06,760 --> 00:08:13,390
We can do it right now in a book list because this is in the same component and I have moved it but

121
00:08:13,510 --> 00:08:15,330
we cannot do it in the child.

122
00:08:15,760 --> 00:08:16,600
So how do we do that.

123
00:08:17,260 --> 00:08:23,290
Well we pass it with the props and this is what I'm saying that this would work exactly the same if

124
00:08:23,290 --> 00:08:25,370
we would have some kind of extra Prop. here.

125
00:08:25,390 --> 00:08:31,300
So let's say here again name is gonna be John if I would want to pass this down again I can just access

126
00:08:31,300 --> 00:08:34,110
this and passed it here as a prop again.

127
00:08:34,210 --> 00:08:37,570
We have already covered this since we already work with the books.

128
00:08:37,750 --> 00:08:40,960
So the same is going to work with this handle method.

129
00:08:41,050 --> 00:08:46,780
What I can do here is I can say handle the name is gonna be delayed again we can name our proposal would

130
00:08:46,780 --> 00:08:49,530
like but I'm just gonna name it exactly the same.

131
00:08:49,600 --> 00:08:53,870
And here I'm gonna be looking for this knot and then I'm looking for a handle.

132
00:08:54,460 --> 00:08:56,450
So first of all I'm passing this now.

133
00:08:56,480 --> 00:09:01,830
Now what do you think is gonna happen in the book if I'm gonna head over here and if I'm gonna console

134
00:09:01,830 --> 00:09:04,410
log the props do you think I'm going to have her.

135
00:09:04,460 --> 00:09:09,540
No not since I'm already suggestion you probably guessed that we can probably access this.

136
00:09:09,700 --> 00:09:16,850
So why don't we render this I'm going to do the inspect and what do you see in a console.

137
00:09:16,870 --> 00:09:20,150
We have six objects now okay so far so good.

138
00:09:20,200 --> 00:09:21,930
And then what is in the object.

139
00:09:21,930 --> 00:09:24,790
Well we'll have the info that we are rendering right now.

140
00:09:25,330 --> 00:09:27,100
But I also have the method.

141
00:09:27,280 --> 00:09:30,020
So we successfully passed it down the child.

142
00:09:30,640 --> 00:09:37,450
Now this case we can start using the method that was actually created here in the parent container.

143
00:09:37,510 --> 00:09:39,840
Now okay so we can do it here.

144
00:09:39,880 --> 00:09:41,300
We can definitely do it here.

145
00:09:41,380 --> 00:09:44,800
But why don't we do something interesting where we pass it down to the bottom.

146
00:09:44,940 --> 00:09:47,080
Now how we're going to pass it down to the bottom.

147
00:09:47,250 --> 00:09:52,890
Well the same way and we can just say no no.

148
00:09:53,080 --> 00:09:55,880
That was the name what handle delete.

149
00:09:55,900 --> 00:09:59,650
So this is gonna be the prop for the button and we're gonna do the same thing.

150
00:09:59,650 --> 00:10:06,040
However in this case we don't need to use this because this one we're passing down as a prop we can

151
00:10:06,040 --> 00:10:10,240
just say here handle the light is gonna be equal to handling the same.

152
00:10:10,330 --> 00:10:15,550
And I would like to just show you quickly let's say we're going to have another button here and then

153
00:10:15,550 --> 00:10:20,940
for the button I would have the on click and I would want to access that handle delete.

154
00:10:21,010 --> 00:10:26,320
Again we're not going to be passing this dot that is kind of important because this one we're getting

155
00:10:26,320 --> 00:10:27,290
as the props.

156
00:10:27,340 --> 00:10:31,110
This is not gonna be from the actual class instance that we are working with.

157
00:10:31,630 --> 00:10:33,240
So this is gonna be from the parent.

158
00:10:33,290 --> 00:10:34,600
That's kind of important.

159
00:10:34,600 --> 00:10:40,690
So here we're going gonna say handle delete not this dot handle it just as a side note because you will

160
00:10:40,690 --> 00:10:42,840
obviously going to see it with the button anyway.

161
00:10:42,850 --> 00:10:45,080
But at the moment let's deal with that.

162
00:10:45,190 --> 00:10:48,050
And then I have handled delete handle delete.

163
00:10:48,160 --> 00:10:53,150
And of course the react is complaining because a console logged it.

164
00:10:53,320 --> 00:10:55,300
But I didn't set it up.

165
00:10:55,300 --> 00:10:56,230
So how do we do that.

166
00:10:56,230 --> 00:10:58,550
Well we can use again the structure.

167
00:10:58,550 --> 00:11:01,850
So I'm going to say handle delete.

168
00:11:01,840 --> 00:11:05,540
And in this case I'm going to be looking for these that props.

169
00:11:05,560 --> 00:11:10,060
And in this case we're not looking in the info because both of them are sitting side by side.

170
00:11:10,540 --> 00:11:14,920
So we have one that is a method and then we have the actual info.

171
00:11:15,340 --> 00:11:17,680
So let me say it now everything should be fine.

172
00:11:17,780 --> 00:11:24,220
And now we have the delete me that has been passed down I already technically show you how we can effect

173
00:11:24,220 --> 00:11:25,180
it anyway.

174
00:11:25,180 --> 00:11:31,570
But what's happening here is again we can do all kinds of restructuring if you want to access right

175
00:11:31,570 --> 00:11:32,760
away handle late.

176
00:11:33,020 --> 00:11:37,750
I can just say that the handle can use handle the lead.

177
00:11:37,750 --> 00:11:42,090
So now we're going to be the structuring and we can right away access it somewhere here.

178
00:11:42,160 --> 00:11:49,000
So let's say maybe I don't know after our style we can do again on click.

179
00:11:49,270 --> 00:11:51,290
And then let's call the function.

180
00:11:51,370 --> 00:11:53,500
And again this is would be the same thing.

181
00:11:53,500 --> 00:11:54,910
We're not using this.

182
00:11:54,910 --> 00:11:57,330
And by the way we wouldn't use this anyway.

183
00:11:57,360 --> 00:12:02,480
This is obviously a function but as a side note anyway so handled late.

184
00:12:02,830 --> 00:12:03,910
Let me say it.

185
00:12:04,090 --> 00:12:06,130
And now let's see what's going to happen in console.

186
00:12:06,300 --> 00:12:09,760
And for some reason I all the time I want to do that.

187
00:12:09,760 --> 00:12:11,990
I don't know what's happening but let's click it.

188
00:12:12,550 --> 00:12:15,620
And as you can see I am from parent component.

189
00:12:16,000 --> 00:12:22,960
And congratulations we have successfully passed down the method all the way to the vocalist to the book

190
00:12:23,150 --> 00:12:24,640
as well as to the button.

191
00:12:24,640 --> 00:12:31,240
So now we know how we can create actually method and pass them out to a children's component.