‫Now we left a small problem
‫in one of the components that we just created earlier.
‫And so let's now go fix that problem, and in the process,
‫discover the problem of prop drilling.
‫But before we go do that,
‫I just want to very quickly review the previous lecture
‫by classifying each of our components
‫into one of the categories that we just looked at.
‫So I think that clearly both the App
‫and the NavBar component here are structural components.
‫So they're only responsible for the structure
‫or for the layout of the application.
‫And the same can also be set of this Main component here.
‫So those are for providing structure.
‫Then the logo here
‫is clearly a presentational component,
‫so it doesn't have any state,
‫and so therefore it's stateless.
‫And it simply presents some content here.
‫Then the Search is, of course, a stateful component.
‫Then NumResults is just a presentational component here.
‫Main we already talked about.
‫Then we have the ListBox,
‫which clearly is a stateful component,
‫and the same for the MovieList and for the WatchedBox.
‫So those are all stateful components,
‫while the Movie simply receives this prop right here
‫and then presents that data in the user interface.
‫And so Movie here is just a stateless
‫or presentational component.
‫Then we have this one here,
‫which is also a presentational component,
‫and the same for this one,
‫so WatchedMoviesList and WatchedMovie.
‫All right, and that's actually it.
‫I just wanted to quickly categorize each of them,
‫but now let's move on
‫to that problem that I mentioned in the very beginning.
‫And that is that right now
‫here we are not dynamically calculating
‫the number of results.
‫So we are not basically taking the list of movies
‫and reading how many there are, and then displaying it here.
‫So that's what we want to do.
‫But yeah, now we only have this X.
‫So what we need, basically,
‫is to get access to the movies state
‫right here in NumResults.
‫Now, where does that state live right now?
‫Well, it's here inside of MovieList,
‫so right here.
‫So, again, it's here, but we also need it here
‫in NumResults.
‫So what's the solution to that?
‫And I really hope you already know at this point.
‫Well, the solution is to lift the state up
‫to the closest parent component.
‫And what parent is that?
‫Well, it's the App component, right?
‫So it's not the NavBar,
‫because, of course, that's not a parent of MovieList.
‫And so it is really the App component.
‫So what we need to do
‫is to cut this from here
‫and place it right back into the App component.
‫All right?
‫And now we need to pass it down as a prop
‫to where we need it.
‫And so this is where the problem of prop drilling
‫will come into play.
‫So, again, we need now this state
‫in order to make this work again inside of the MovieList.
‫But this MovieList is really deeply nested
‫inside this component tree, right?
‫So it has these two parent components,
‫which now will also need to receive that state as a prop.
‫But instead of talking, let's actually do this.
‫So movies={movies}.
‫So now we have the movies array inside Main,
‫so let's go there.
‫And we need to receive it here,
‫and then we need to pass it here
‫right into the WatchedBox
‫or actually into the ListBox.
‫So movies={movies},
‫or actually here, yeah
‫it's not main, of course, it's movies.
‫Okay, so now we got it inside the Main,
‫and now we got it inside the ListBox.
‫So let's come here and do it all again.
‫So accepting it here
‫and then passing it here.
‫So movies={movies}.
‫And so what we are doing right now
‫is what we call prop drilling.
‫So now we finally accept it here, and then it works again.
‫So basically prop drilling means
‫that we need to pass some prop
‫through several nested child components
‫in order to get that data into some deeply nested component,
‫which in this case is this one.
‫So we had to pass this movies prop here first into the Main,
‫then, well, from the Main into the ListBox,
‫and then from the ListBox into the MovieList.
‫And so all these components,
‫they didn't actually even need this prop.
‫All they needed this for
‫was to then pass it down even further the tree.
‫And so we end up with a lot of props
‫that are really not needed at all.
‫All they are needed for
‫is to pass the data down even further
‫into our component tree.
‫So this is what prop drilling is.
‫And you saw that it is not a lot of fun,
‫and it could be even worse, of course,
‫if the data was nested even deeper into the tree.
‫So this was just like three levels deep,
‫but it could be like 5 or 10 levels.
‫And so then it would become a little bit out of control.
‫So we will look at ways of fixing prop drilling
‫a bit later in this section,
‫but, for now, let's finally also make this prop,
‫so this movies data,
‫available right here where we also need it.
‫So right here.
‫So movies={movies}.
‫So now we have to do some prop drilling again,
‫because here we need to again accept this prop,
‫but we don't need it here.
‫All we need it for is to pass it down again.
‫But here it's not so bad,
‫because it's really just one level.
‫Okay, and now, finally, movies.length.
‫And so ta-da, we got three results.
‫Nice. So this works.
‫And what we just did here
‫is a perfectly valid solution
‫to make the application work, of course.
‫But, as I mentioned,
‫what we did was some so-called prop drilling,
‫which is not always the best solution,
‫especially if we need
‫to pass that prop down really, really deep into the tree.
‫And so in the next lecture,
‫we will take a look
‫at one of the possible solutions to this problem,
‫which is component composition.