1
00:00:00,180 --> 00:00:07,470
Amazing job, and once we have covered use reducer and hopefully worked on this project as well.

2
00:00:07,830 --> 00:00:11,730
Now I want to talk about the proposed drilling now.

3
00:00:11,740 --> 00:00:14,460
Let me just emphasize something right away.

4
00:00:14,490 --> 00:00:18,290
Where prop drilling is not an official term.

5
00:00:18,630 --> 00:00:27,180
However, it is somewhat of the side effect when you have multiple components and then you have the

6
00:00:27,210 --> 00:00:36,330
big componentry, and then you need to start passing some state from the top component all the way to

7
00:00:36,330 --> 00:00:38,850
the bottom of your componentry.

8
00:00:39,300 --> 00:00:47,190
And the reason why we will cover drilling first is because in a next tutorial chapter in the U.S. context,

9
00:00:47,190 --> 00:00:50,640
we'll see how use context fixes that.

10
00:00:51,460 --> 00:00:58,510
And more specifically, will we take a look at the context API that is designed for that and not use

11
00:00:58,510 --> 00:01:02,600
context is the new way how we can access that context?

12
00:01:02,980 --> 00:01:10,960
So this is going to be somewhat of a repetition where we will set up a component where basically we

13
00:01:10,960 --> 00:01:16,150
have less than one each and every item in the list has a button and we will just want to remove that

14
00:01:16,150 --> 00:01:16,540
item.

15
00:01:17,020 --> 00:01:23,380
So a little bit of repetition just to see what is Propp drilling and how it looks like.

16
00:01:23,560 --> 00:01:31,060
And then in the next chapter, we'll see how we can fix that using the context API as well as use context.

17
00:01:31,270 --> 00:01:31,540
OK.

18
00:01:31,990 --> 00:01:32,440
All right.

19
00:01:32,710 --> 00:01:33,130
Now.

20
00:01:33,910 --> 00:01:37,780
We're going to navigate to our prop drilling folder.

21
00:01:38,050 --> 00:01:45,310
We have prop drilling dress and of course, it is in the folder No.7 and then the set up in the app

22
00:01:45,310 --> 00:01:46,210
I would want to import.

23
00:01:46,210 --> 00:01:52,530
I guess I would start with that where I'm going to go with import, I'm looking for set up and that

24
00:01:52,570 --> 00:01:58,660
it is coming from the editorial line prob drilling of course, and then the set up.

25
00:01:59,010 --> 00:02:00,640
Now we would want render.

26
00:02:01,000 --> 00:02:05,010
So we're going to go here with a setup and there it is.

27
00:02:05,050 --> 00:02:09,210
Now of course it complains that there is some type of issue.

28
00:02:09,550 --> 00:02:12,530
So let's not forget there we have the proper drilling.

29
00:02:12,550 --> 00:02:14,110
Everything should work.

30
00:02:14,410 --> 00:02:20,770
And of course, the reason why it doesn't work because I successfully messed it up by not pointing to

31
00:02:20,770 --> 00:02:21,760
a specific pipe.

32
00:02:22,280 --> 00:02:25,600
Now, of course, we have the Parap drilling.

33
00:02:25,660 --> 00:02:32,200
Now, once we're here, like I said, a little bit of repetition where essentially we'll create a list

34
00:02:32,590 --> 00:02:36,730
and then we will have the items in the list, of course.

35
00:02:37,090 --> 00:02:42,760
And then each and every item will have that option of removing itself from the list.

36
00:02:43,030 --> 00:02:45,190
Now, we do need to have a data here.

37
00:02:45,190 --> 00:02:49,480
So let's go with the import and the data that is coming from.

38
00:02:49,840 --> 00:02:52,630
And of course, we need to go multiple levels up.

39
00:02:53,180 --> 00:02:57,650
So I believe three and there is our data.

40
00:02:57,970 --> 00:03:04,470
So once we have the data now, I would want to set up my main component where I have the const.

41
00:03:04,480 --> 00:03:06,700
I'll have a list value here.

42
00:03:06,920 --> 00:03:15,790
So people again set people that people and that is equal to a year's state and then will pass in that

43
00:03:15,790 --> 00:03:16,150
data.

44
00:03:16,450 --> 00:03:21,790
So we should have, again, that basic array that we already covered before.

45
00:03:22,240 --> 00:03:27,280
And now, of course, what I would want is to do some kind of return in my address.

46
00:03:27,940 --> 00:03:29,770
So start by returning a section.

47
00:03:30,920 --> 00:03:40,340
So let's go with section online, let's write Hurring three maybe, and let's just say prop a drilling

48
00:03:40,760 --> 00:03:43,030
and also I would want to have a list.

49
00:03:43,610 --> 00:03:49,970
So there's going to be a list component that takes as a prop the people.

50
00:03:50,390 --> 00:03:56,240
So we're going to look for people here and that is going to be equal, of course, to my people.

51
00:03:56,240 --> 00:03:59,230
State value and what's missing is my list.

52
00:03:59,240 --> 00:03:59,610
Correct.

53
00:03:59,870 --> 00:04:00,860
So we'll go with list.

54
00:04:00,860 --> 00:04:04,280
And I know that I'm going to be looking for people.

55
00:04:04,590 --> 00:04:09,970
Perhaps that's why I will the structure it right here without any hesitation.

56
00:04:10,520 --> 00:04:14,040
And as far as the return, I would want to iterate over that.

57
00:04:14,060 --> 00:04:14,350
Right.

58
00:04:14,540 --> 00:04:16,360
Because we already know that it isn't right.

59
00:04:16,700 --> 00:04:23,540
And then for each and every item, I would want to render the single person component that I haven't

60
00:04:23,540 --> 00:04:24,280
created yet.

61
00:04:24,590 --> 00:04:26,210
So I just go with return.

62
00:04:27,260 --> 00:04:34,430
We will close out our fragment and then, like I said, we'll just go with people, all right.

63
00:04:34,730 --> 00:04:38,390
We use map each and every item is a person.

64
00:04:38,660 --> 00:04:46,280
And what I would want to return is a single person component that we're going to create nanoseconds

65
00:04:46,280 --> 00:04:51,140
a of contact and then a single person is equal.

66
00:04:51,500 --> 00:04:56,270
And in a single person, again, I know that person is an object.

67
00:04:56,510 --> 00:05:01,070
There's going to be multiple properties if you need to jog your memory.

68
00:05:01,250 --> 00:05:02,600
This is our data.

69
00:05:02,600 --> 00:05:04,160
So we have ID and name.

70
00:05:04,460 --> 00:05:11,150
And what I would want in that single person is to target the ID name for now.

71
00:05:11,340 --> 00:05:18,350
Eventually there's going to be more data, but for now we'll just target ID and name like so.

72
00:05:18,710 --> 00:05:26,630
And then as far as the return, let's just return a div with the class of item, class name and line

73
00:05:27,110 --> 00:05:27,920
item here.

74
00:05:28,310 --> 00:05:31,970
And for the time being let's just write a single item.

75
00:05:32,270 --> 00:05:36,380
So heading for with a single item.

76
00:05:36,680 --> 00:05:40,160
And now of course what I want is where I'm returning.

77
00:05:40,970 --> 00:05:46,040
I'm going to go with a single person and I'll right away get my I.D. because remember we still have

78
00:05:46,040 --> 00:05:46,400
the list.

79
00:05:46,410 --> 00:05:52,000
So we need to use the Kiprop and let's just say here person and then dot it.

80
00:05:52,640 --> 00:05:57,930
So once we save, we should have four single items on the screen.

81
00:05:58,370 --> 00:05:59,450
Now, why do we have one?

82
00:05:59,470 --> 00:06:03,110
Well, because my asked for objects.

83
00:06:04,120 --> 00:06:12,090
And just so we all are on the same page, we have our we set it equal to data, that's our initial value,

84
00:06:12,490 --> 00:06:18,370
then we have the first return where we have that in three with proper drilling and then our list component

85
00:06:18,610 --> 00:06:20,680
that takes a prop.

86
00:06:21,010 --> 00:06:27,630
And I named people and I set it equal to my state value of people than in here on the structure.

87
00:06:27,640 --> 00:06:34,600
Right away, the people drop out of the props and I'm returning a people map.

88
00:06:34,600 --> 00:06:37,600
So a new array weren't iterating over people.

89
00:06:37,870 --> 00:06:45,700
And then for each and every item in my area, I return a single person component.

90
00:06:45,970 --> 00:06:48,850
And then since that is list, I need to pass in the key.

91
00:06:49,570 --> 00:06:56,170
And then in this component, of course, I'm accessing the ID, which I'm not using at the moment.

92
00:06:56,380 --> 00:06:59,970
And as far as the return, I'm returning a single item.

93
00:07:00,640 --> 00:07:07,270
So that is something that we have already covered more than a few times when we talk about tutorials

94
00:07:07,450 --> 00:07:09,080
as well as the project.

95
00:07:09,520 --> 00:07:11,770
Now, here comes the interesting part.

96
00:07:12,430 --> 00:07:20,350
Well, what if I would want to set up a function that deletes that one single item from the list?

97
00:07:21,070 --> 00:07:27,670
OK, let's first set up the functionality and then, of course, we'll deal with the rest of the year.

98
00:07:28,210 --> 00:07:30,040
So we're going to go with const.

99
00:07:30,040 --> 00:07:37,660
I'll call this a remove person is equal to an idea because this particular function will be looking

100
00:07:37,660 --> 00:07:38,410
for the array.

101
00:07:38,800 --> 00:07:43,780
Then we need to call set people then again, just so we can practice a little bit.

102
00:07:44,070 --> 00:07:46,030
I'll call this in a function.

103
00:07:46,900 --> 00:07:56,050
I'll say my current state value is equal to people, and then let's just return people filter and each

104
00:07:56,050 --> 00:07:59,170
and every item will be set up as a person.

105
00:07:59,410 --> 00:08:06,730
And I'll say, if the person ID does not match to whatever ID I pass them, then of course I'll return

106
00:08:06,730 --> 00:08:06,880
it.

107
00:08:07,210 --> 00:08:16,030
If it does match, then are removed from the list of person idea is not equal to an I.D. like so let's

108
00:08:16,030 --> 00:08:18,730
say it and we have the function beautiful.

109
00:08:18,730 --> 00:08:24,100
And now the interesting part starts where now I need to get this function where.

110
00:08:24,970 --> 00:08:26,320
Well I need it here.

111
00:08:26,320 --> 00:08:26,720
Correct.

112
00:08:27,400 --> 00:08:30,100
So what are we doing first.

113
00:08:30,340 --> 00:08:34,230
Need to pass and then we'll have to structure it.

114
00:08:34,240 --> 00:08:42,610
Of course then we'll need to pass into a single person and then eventually we'll also have to use it

115
00:08:42,940 --> 00:08:44,140
over here.

116
00:08:45,000 --> 00:08:54,000
So the big question is, how can we get this function all the way here and this is that prop drilling

117
00:08:54,000 --> 00:09:02,700
where essentially we have the component here and you can make a good argument that this component,

118
00:09:02,700 --> 00:09:08,600
the lowest component, does not does not need that remove person function.

119
00:09:08,610 --> 00:09:14,130
But there's no other way for us to pass it down to a single person.

120
00:09:14,340 --> 00:09:17,430
I mean, I cannot simply say, all right, remove person.

121
00:09:17,610 --> 00:09:19,620
You'll be called here in a single person.

122
00:09:20,220 --> 00:09:24,090
A single person needs to somehow have access to that remote person.

123
00:09:24,330 --> 00:09:32,700
And this is what the prop drilling is, where the illest component will have to take to remove person

124
00:09:32,850 --> 00:09:35,700
and pass it down to a single person.

125
00:09:35,970 --> 00:09:40,740
So first, let's start by passing the remove person as a prop down.

126
00:09:41,100 --> 00:09:48,390
And that is something that you need to keep in mind where when we talk about the functions, we also

127
00:09:48,390 --> 00:09:50,190
can pass them as props.

128
00:09:50,460 --> 00:09:53,310
We're not limited to just state values.

129
00:09:54,060 --> 00:10:00,670
So in this case, let's go with our person is equal to a remove person.

130
00:10:00,900 --> 00:10:04,680
So now I'm passing in my function now in the list.

131
00:10:04,680 --> 00:10:06,510
Like I said, I would need to structure it.

132
00:10:06,840 --> 00:10:14,030
I would need to say, all right, so get me this removed person from my props and now I need to pass

133
00:10:14,040 --> 00:10:15,600
it into a single person.

134
00:10:16,020 --> 00:10:23,430
Now, I also need to pass in this ID and name and like I already previously covered, we have multiple

135
00:10:23,430 --> 00:10:24,330
ways how we can do that.

136
00:10:24,330 --> 00:10:32,070
But my preference is using this spread object notation where I just go with curly braces and then the

137
00:10:32,070 --> 00:10:39,420
dot and then whatever is the name of my parameter, meaning this now points to that item in the list.

138
00:10:39,600 --> 00:10:47,580
And I'm just saying, you know, add all the properties, meaning in this case I and name on to the

139
00:10:47,580 --> 00:10:49,410
props of the single person.

140
00:10:49,440 --> 00:10:52,680
And that's why right away I have access to the ID and name.

141
00:10:52,890 --> 00:10:57,170
And then again we need to pass in that remove person.

142
00:10:57,540 --> 00:11:00,490
So go here with remove person.

143
00:11:00,690 --> 00:11:02,060
So now we're passing it down.

144
00:11:02,250 --> 00:11:09,510
And of course if I'm looking for a name I can also look for remove person prop.

145
00:11:09,720 --> 00:11:10,220
Correct.

146
00:11:10,230 --> 00:11:17,700
Because now we pass that down so we say remove person and now it's finally set up our logic.

147
00:11:17,700 --> 00:11:20,130
We're not going to say heading for central item.

148
00:11:20,580 --> 00:11:21,960
There's a name here.

149
00:11:22,470 --> 00:11:25,100
So I'm going to be looking for my name prop.

150
00:11:25,380 --> 00:11:32,950
And also I would want to set up a button where I could set up a on clerk that will trigger that ermold

151
00:11:32,970 --> 00:11:33,380
person.

152
00:11:33,570 --> 00:11:42,780
So button that on click is equal to a in one function here and I'll say remove person.

153
00:11:43,020 --> 00:11:47,340
And I also want to grab that ID each and every item.

154
00:11:47,340 --> 00:11:50,070
The single person item will have that unique ID.

155
00:11:50,670 --> 00:11:51,110
Correct.

156
00:11:51,390 --> 00:11:57,270
And now of course I would want to invoke my remove person once I click on a button with that specific

157
00:11:57,270 --> 00:11:57,540
idea.

158
00:11:58,350 --> 00:12:07,070
And then as far as the value we are right Irmo and again idea of prop drilling is following where list

159
00:12:07,080 --> 00:12:14,880
component technically does not does not need to have access to the remove person.

160
00:12:14,880 --> 00:12:23,700
But we have no other way to parse down our function in a single person unless we actually pass it through

161
00:12:23,700 --> 00:12:28,140
the list because that is something called prop drilling, because we need to understand that there's

162
00:12:28,140 --> 00:12:30,270
definitely could be more components.

163
00:12:30,750 --> 00:12:37,860
So if we, for example, set up this function all the way up in the prop drilling, what if I'm going

164
00:12:37,860 --> 00:12:42,690
to have, I don't know, two or three components down the componentry?

165
00:12:43,200 --> 00:12:48,750
So from the single person, I would need to keep on passing and passing and passing and passing all

166
00:12:48,750 --> 00:12:53,730
the way down to that one specific component that is looking for that remove person.

167
00:12:54,090 --> 00:12:58,710
And that is something that the context API as well as Redox.

168
00:12:58,710 --> 00:13:01,710
But redacts is definitely for more complex cases.

169
00:13:02,070 --> 00:13:07,290
I wouldn't suggest certain products for this particular scenario, but Context API is beautiful for

170
00:13:07,290 --> 00:13:13,710
this type of scenario where essentially we can avoid this prop drilling.

171
00:13:14,130 --> 00:13:15,930
OK, hopefully that is clear.

172
00:13:16,110 --> 00:13:23,690
We understand what is prop drilling and then in the next chapter we will take a look at how context

173
00:13:23,710 --> 00:13:31,710
API helps us to fix it, where we won't have to pass in return through the list or any other components

174
00:13:31,710 --> 00:13:38,490
we would have into that one specific component that is looking for a function that is all the way up

175
00:13:38,850 --> 00:13:40,700
in the component componentry.