1
00:00:01,140 --> 00:00:03,030
‫Now we left a small problem

2
00:00:03,030 --> 00:00:06,480
‫in one of the components that we just created earlier.

3
00:00:06,480 --> 00:00:10,350
‫And so let's now go fix that problem, and in the process,

4
00:00:10,350 --> 00:00:13,113
‫discover the problem of prop drilling.

5
00:00:14,940 --> 00:00:16,440
‫But before we go do that,

6
00:00:16,440 --> 00:00:19,950
‫I just want to very quickly review the previous lecture

7
00:00:19,950 --> 00:00:22,470
‫by classifying each of our components

8
00:00:22,470 --> 00:00:26,850
‫into one of the categories that we just looked at.

9
00:00:26,850 --> 00:00:29,880
‫So I think that clearly both the App

10
00:00:29,880 --> 00:00:34,290
‫and the NavBar component here are structural components.

11
00:00:34,290 --> 00:00:37,590
‫So they're only responsible for the structure

12
00:00:37,590 --> 00:00:40,350
‫or for the layout of the application.

13
00:00:40,350 --> 00:00:44,403
‫And the same can also be set of this Main component here.

14
00:00:45,510 --> 00:00:48,840
‫So those are for providing structure.

15
00:00:48,840 --> 00:00:49,770
‫Then the logo here

16
00:00:49,770 --> 00:00:52,650
‫is clearly a presentational component,

17
00:00:52,650 --> 00:00:54,630
‫so it doesn't have any state,

18
00:00:54,630 --> 00:00:56,490
‫and so therefore it's stateless.

19
00:00:56,490 --> 00:00:59,610
‫And it simply presents some content here.

20
00:00:59,610 --> 00:01:03,780
‫Then the Search is, of course, a stateful component.

21
00:01:03,780 --> 00:01:08,253
‫Then NumResults is just a presentational component here.

22
00:01:09,090 --> 00:01:11,070
‫Main we already talked about.

23
00:01:11,070 --> 00:01:12,720
‫Then we have the ListBox,

24
00:01:12,720 --> 00:01:15,813
‫which clearly is a stateful component,

25
00:01:16,830 --> 00:01:21,830
‫and the same for the MovieList and for the WatchedBox.

26
00:01:23,010 --> 00:01:25,110
‫So those are all stateful components,

27
00:01:25,110 --> 00:01:28,770
‫while the Movie simply receives this prop right here

28
00:01:28,770 --> 00:01:32,190
‫and then presents that data in the user interface.

29
00:01:32,190 --> 00:01:35,130
‫And so Movie here is just a stateless

30
00:01:35,130 --> 00:01:36,903
‫or presentational component.

31
00:01:38,280 --> 00:01:39,630
‫Then we have this one here,

32
00:01:39,630 --> 00:01:42,063
‫which is also a presentational component,

33
00:01:43,200 --> 00:01:46,260
‫and the same for this one,

34
00:01:46,260 --> 00:01:49,083
‫so WatchedMoviesList and WatchedMovie.

35
00:01:50,370 --> 00:01:52,320
‫All right, and that's actually it.

36
00:01:52,320 --> 00:01:55,950
‫I just wanted to quickly categorize each of them,

37
00:01:55,950 --> 00:01:57,540
‫but now let's move on

38
00:01:57,540 --> 00:02:00,240
‫to that problem that I mentioned in the very beginning.

39
00:02:00,240 --> 00:02:02,460
‫And that is that right now

40
00:02:02,460 --> 00:02:04,950
‫here we are not dynamically calculating

41
00:02:04,950 --> 00:02:06,720
‫the number of results.

42
00:02:06,720 --> 00:02:09,960
‫So we are not basically taking the list of movies

43
00:02:09,960 --> 00:02:13,800
‫and reading how many there are, and then displaying it here.

44
00:02:13,800 --> 00:02:16,050
‫So that's what we want to do.

45
00:02:16,050 --> 00:02:19,200
‫But yeah, now we only have this X.

46
00:02:19,200 --> 00:02:21,090
‫So what we need, basically,

47
00:02:21,090 --> 00:02:24,600
‫is to get access to the movies state

48
00:02:24,600 --> 00:02:26,780
‫right here in NumResults.

49
00:02:27,900 --> 00:02:30,900
‫Now, where does that state live right now?

50
00:02:30,900 --> 00:02:33,033
‫Well, it's here inside of MovieList,

51
00:02:34,350 --> 00:02:36,630
‫so right here.

52
00:02:36,630 --> 00:02:40,530
‫So, again, it's here, but we also need it here

53
00:02:40,530 --> 00:02:42,390
‫in NumResults.

54
00:02:42,390 --> 00:02:44,670
‫So what's the solution to that?

55
00:02:44,670 --> 00:02:48,180
‫And I really hope you already know at this point.

56
00:02:48,180 --> 00:02:51,600
‫Well, the solution is to lift the state up

57
00:02:51,600 --> 00:02:54,210
‫to the closest parent component.

58
00:02:54,210 --> 00:02:56,670
‫And what parent is that?

59
00:02:56,670 --> 00:02:59,730
‫Well, it's the App component, right?

60
00:02:59,730 --> 00:03:01,170
‫So it's not the NavBar,

61
00:03:01,170 --> 00:03:04,320
‫because, of course, that's not a parent of MovieList.

62
00:03:04,320 --> 00:03:06,963
‫And so it is really the App component.

63
00:03:08,070 --> 00:03:09,600
‫So what we need to do

64
00:03:09,600 --> 00:03:11,670
‫is to cut this from here

65
00:03:11,670 --> 00:03:15,093
‫and place it right back into the App component.

66
00:03:16,860 --> 00:03:17,910
‫All right?

67
00:03:17,910 --> 00:03:20,850
‫And now we need to pass it down as a prop

68
00:03:20,850 --> 00:03:22,380
‫to where we need it.

69
00:03:22,380 --> 00:03:25,140
‫And so this is where the problem of prop drilling

70
00:03:25,140 --> 00:03:26,673
‫will come into play.

71
00:03:27,810 --> 00:03:30,720
‫So, again, we need now this state

72
00:03:30,720 --> 00:03:34,650
‫in order to make this work again inside of the MovieList.

73
00:03:34,650 --> 00:03:37,560
‫But this MovieList is really deeply nested

74
00:03:37,560 --> 00:03:40,800
‫inside this component tree, right?

75
00:03:40,800 --> 00:03:43,440
‫So it has these two parent components,

76
00:03:43,440 --> 00:03:47,790
‫which now will also need to receive that state as a prop.

77
00:03:47,790 --> 00:03:51,690
‫But instead of talking, let's actually do this.

78
00:03:51,690 --> 00:03:55,107
‫So movies={movies}.

79
00:03:55,980 --> 00:03:59,880
‫So now we have the movies array inside Main,

80
00:03:59,880 --> 00:04:01,023
‫so let's go there.

81
00:04:02,220 --> 00:04:04,113
‫And we need to receive it here,

82
00:04:05,880 --> 00:04:08,100
‫and then we need to pass it here

83
00:04:08,100 --> 00:04:10,590
‫right into the WatchedBox

84
00:04:10,590 --> 00:04:12,990
‫or actually into the ListBox.

85
00:04:12,990 --> 00:04:17,427
‫So movies={movies},

86
00:04:19,020 --> 00:04:19,853
‫or actually here, yeah

87
00:04:19,853 --> 00:04:22,683
‫it's not main, of course, it's movies.

88
00:04:24,150 --> 00:04:28,530
‫Okay, so now we got it inside the Main,

89
00:04:28,530 --> 00:04:30,723
‫and now we got it inside the ListBox.

90
00:04:31,650 --> 00:04:34,233
‫So let's come here and do it all again.

91
00:04:35,520 --> 00:04:37,620
‫So accepting it here

92
00:04:37,620 --> 00:04:40,023
‫and then passing it here.

93
00:04:41,160 --> 00:04:43,650
‫So movies={movies}.

94
00:04:43,650 --> 00:04:45,480
‫And so what we are doing right now

95
00:04:45,480 --> 00:04:48,003
‫is what we call prop drilling.

96
00:04:50,520 --> 00:04:55,470
‫So now we finally accept it here, and then it works again.

97
00:04:55,470 --> 00:04:57,750
‫So basically prop drilling means

98
00:04:57,750 --> 00:04:59,730
‫that we need to pass some prop

99
00:04:59,730 --> 00:05:02,280
‫through several nested child components

100
00:05:02,280 --> 00:05:07,080
‫in order to get that data into some deeply nested component,

101
00:05:07,080 --> 00:05:09,720
‫which in this case is this one.

102
00:05:09,720 --> 00:05:14,720
‫So we had to pass this movies prop here first into the Main,

103
00:05:15,780 --> 00:05:20,220
‫then, well, from the Main into the ListBox,

104
00:05:20,220 --> 00:05:24,000
‫and then from the ListBox into the MovieList.

105
00:05:24,000 --> 00:05:25,590
‫And so all these components,

106
00:05:25,590 --> 00:05:28,530
‫they didn't actually even need this prop.

107
00:05:28,530 --> 00:05:29,880
‫All they needed this for

108
00:05:29,880 --> 00:05:33,180
‫was to then pass it down even further the tree.

109
00:05:33,180 --> 00:05:35,700
‫And so we end up with a lot of props

110
00:05:35,700 --> 00:05:38,070
‫that are really not needed at all.

111
00:05:38,070 --> 00:05:39,390
‫All they are needed for

112
00:05:39,390 --> 00:05:42,090
‫is to pass the data down even further

113
00:05:42,090 --> 00:05:44,580
‫into our component tree.

114
00:05:44,580 --> 00:05:46,710
‫So this is what prop drilling is.

115
00:05:46,710 --> 00:05:49,980
‫And you saw that it is not a lot of fun,

116
00:05:49,980 --> 00:05:52,410
‫and it could be even worse, of course,

117
00:05:52,410 --> 00:05:56,070
‫if the data was nested even deeper into the tree.

118
00:05:56,070 --> 00:05:58,440
‫So this was just like three levels deep,

119
00:05:58,440 --> 00:06:01,380
‫but it could be like 5 or 10 levels.

120
00:06:01,380 --> 00:06:04,413
‫And so then it would become a little bit out of control.

121
00:06:05,640 --> 00:06:08,850
‫So we will look at ways of fixing prop drilling

122
00:06:08,850 --> 00:06:10,620
‫a bit later in this section,

123
00:06:10,620 --> 00:06:15,620
‫but, for now, let's finally also make this prop,

124
00:06:16,500 --> 00:06:18,540
‫so this movies data,

125
00:06:18,540 --> 00:06:21,153
‫available right here where we also need it.

126
00:06:21,990 --> 00:06:23,670
‫So right here.

127
00:06:23,670 --> 00:06:27,350
‫So movies={movies}.

128
00:06:27,350 --> 00:06:30,600
‫So now we have to do some prop drilling again,

129
00:06:30,600 --> 00:06:34,680
‫because here we need to again accept this prop,

130
00:06:34,680 --> 00:06:36,720
‫but we don't need it here.

131
00:06:36,720 --> 00:06:40,323
‫All we need it for is to pass it down again.

132
00:06:41,520 --> 00:06:42,990
‫But here it's not so bad,

133
00:06:42,990 --> 00:06:45,273
‫because it's really just one level.

134
00:06:48,930 --> 00:06:52,967
‫Okay, and now, finally, movies.length.

135
00:06:55,260 --> 00:06:59,880
‫And so ta-da, we got three results.

136
00:06:59,880 --> 00:07:02,160
‫Nice. So this works.

137
00:07:02,160 --> 00:07:03,660
‫And what we just did here

138
00:07:03,660 --> 00:07:05,700
‫is a perfectly valid solution

139
00:07:05,700 --> 00:07:08,370
‫to make the application work, of course.

140
00:07:08,370 --> 00:07:09,720
‫But, as I mentioned,

141
00:07:09,720 --> 00:07:12,990
‫what we did was some so-called prop drilling,

142
00:07:12,990 --> 00:07:15,330
‫which is not always the best solution,

143
00:07:15,330 --> 00:07:16,560
‫especially if we need

144
00:07:16,560 --> 00:07:20,970
‫to pass that prop down really, really deep into the tree.

145
00:07:20,970 --> 00:07:22,320
‫And so in the next lecture,

146
00:07:22,320 --> 00:07:23,430
‫we will take a look

147
00:07:23,430 --> 00:07:26,760
‫at one of the possible solutions to this problem,

148
00:07:26,760 --> 00:07:29,043
‫which is component composition.