‫With the context provider
‫and value now in place, let's consume the context value
‫in multiple components and get rid
‫of all the annoying props that we have in our app.
‫And let's actually start by removing props
‫from one component at a time.
‫So starting here with the header
‫let's get rid of all of this
‫so that we can then recreate the same functionality
‫only by reading the value out of the context.
‫So as we save this now we will get tons of errors here
‫because for now these components,
‫of course still rely on the props.
‫But anyway, moving now into the header component
‫where we just removed those props from.
‫Let's see if this component
‫actually does need some data from the context.
‫So here we can remove all these props.
‫And so if all we have is props, then it means
‫that this component itself doesn't need any data.
‫So any value out of the context.
‫But actually it does
‫because here we have this onClear Posts prop,
‫which again this component really needs.
‫And so therefore we now need to get this
‫onClear Posts function from the context.
‫So of course, let's remove all the props there
‫because we are no longer receiving props.
‫And instead, let's now read
‫this function right here from the context.
‫So to do that, it's time to meet yet another React hook.
‫And this one is simply called useContext.
‫So make sure that you import it from React.
‫So just like this
‫because it is indeed another function
‫that is coming from the React library.
‫And then here what we need to do
‫is to pass in the entire context object.
‫So that's PostContext
‫and not PostContext.provider or dot consumer
‫which also exists, but really only PostContext.
‫So this will then return something
‫and let's just call that X for now and take a look at it.
‫Now this is not going to work
‫because of all the errors that we have here.
‫So let's just comment all of this out
‫which you don't have to do, but this is just to show you
‫what this hook here actually returns.
‫And so here we can see that it does basically
‫return the entire value that we passed into the context.
‫So this object right here.
‫So the result of the useQuery hook
‫is exactly this value that we passed in here.
‫And so we can then de-structure that here
‫and basically take out only the part that we want.
‫So that's unClearPosts in this case.
‫Okay, but that of course still gives us errors
‫and that's because results and search posts
‫of course also rely on some props.
‫So let's move on here
‫and let's also give them their value from the context.
‫So here let me just place a comment,
‫just to complete our sequence.
‫So one, two, and now three
‫which is consuming the context value.
‫And so this is then the third step
‫of what we need to do when we use the context.
‫And so now all we need to do is the same thing
‫in all the components that need the data.
‫So here what we need is searchQuery and set searchQuery
‫which we are going to get from useContext.
‫So PostContext, and that's not yet it
‫because our next component
‫that is also included in the header
‫so search posts or actually results,
‫so results also needs a prop
‫that was passed into the header component.
‫So let's grab that here as well,
‫which is in this case just posts.
‫So as we can see down here,
‫so useContext, PostContext
‫give it a save and, beautiful.
‫Now we are back to working.
‫So let's see our component tree here again
‫and can make this really large
‫because the application is not really that important.
‫So what matters is that we post in the value
‫into the context provider, which we can actually see here.
‫And then for example here
‫in the results, we can see that through the Context hook,
‫we get access to all the data here.
‫So even though we only read the posts data
‫here we can still see the entire content of the Context.
‫So the entire value, but what really matters here
‫is that we got the posts data
‫into this really nested component
‫without having to pass in any props.
‫And so that's exactly the functionality of the context API
‫that we learned at the very first lecture of this section.
‫So this posts data is basically now being broadcasted
‫by this provider and injected into the results
‫without ever having to pass through the header.
‫And so the prop drilling really is gone,
‫at least for that part because
‫as you see we still have a few props here.
‫Now, actually, I want to leave this for you as a challenge.
‫So I want you to do what we just did, which is to remove
‫all of the props and all of the components,
‫and then simply use the context value
‫to give each component access
‫to the data that it actually needs.
‫So pause the video now and then meet me back here
‫in a minute where I will give you the solution.
‫Okay, so let's just cut everything here.
‫So all the props, we don't need them anymore.
‫This main component here really
‫doesn't need any of this data.
‫So all it did with this props was to pass it down
‫into these other components, and the same even for this one.
‫So even this post component doesn't really do anything.
‫So it doesn't need the posts data.
‫Who needs the post data is this list component.
‫So let's go there actually.
‫And so let's give it depost data.
‫So destructuring the result of the useContext hook.
‫So PostContext, okay.
‫And here we don't even get any error.
‫And since we're here
‫let's just also add dysfunction right here.
‫So on at post useContext, PostContext,
‫and yeah, then let's move back up
‫because here we have another one.
‫So this one also doesn't need the prop benefits
‫that we now get that it was on at post
‫from useContext.
‫And I think that's actually it.
‫So let's just check.
‫And indeed, none of our components now
‫receive props anymore.
‫And notice how much cleaner here is our JSX.
‫I mean, we still have this button here,
‫which is kind of ugly, and which we could actually extract
‫into its own component.
‫And so if you want to do that, feel free to take this
‫and probably also this effect.
‫And so then this whole thing here
‫becomes even more clean.
‫And of course, it's not only about being clean,
‫so it also makes the components
‫a bit more independent and standalone.
‫So take for example this list component right here.
‫If before we wanted to reuse this list somewhere else
‫then we would have to first pass the props
‫to that place where we wanted to reuse it.
‫So let's just as an example say
‫that for some reason we wanted this list
‫inside the footer, so why not?
‫So just like this, and since we are now using context
‫this is really all we have to do.
‫So we can give it a safe.
‫And if we then come here
‫we will see that inside the footer
‫well, can't really see that right now.
‫But well, let's see it here in our component tree.
‫So we see that here inside the footer
‫we have indeed now this list
‫and all we had to do was to place it there
‫so we didn't have to pass any props first to the footer
‫and then into the list, which we would have to do before
‫when we didn't have to context API yet, right?
‫And so this list was a bit less reusable
‫and less standalone.
‫But again, with this, we can now just place this anywhere
‫even if the parent component doesn't have access
‫to the posts prop.
‫So which is the case right here.
‫Okay, so with this we finished
‫actually implementing our context
‫and as you see, it was actually pretty easy, right?
‫We can however do a couple of improvements
‫to the way that we use the context API in practice.
‫And so let's do that in the next video.