‫Welcome back.
‫So, let's now start using the context API in practice
‫in the Atomic Blog application
‫that you have studied earlier.
‫So, as I said in that challenge lecture,
‫it's extremely important
‫that you got yourself highly familiar with this application,
‫because what we're going to do now,
‫and over the next few lectures
‫is to completely refactor this entire application
‫from having all the prop drilling that you find
‫in this application to using the context API instead.
‫And, we are going to learn about the context API
‫here in this separate project,
‫because this one is a lot simpler
‫than the WorldWise application,
‫and like this,
‫we can learn this very important part of React
‫more in isolation,
‫so that we don't mix many different concepts altogether.
‫But, anyway, that's enough talk.
‫Let's just very quickly go together
‫through this application,
‫just so we are all on the same page.
‫So, as the application loads,
‫we create these 30 random posts
‫and store them into the posts' array.
‫So, remember that this callback function here
‫only runs on the initial renderer, right?
‫Then, here, the posts are actually filtered
‫by the search query that we can type up here.
‫So, if we type fire,
‫then only these posts here that have fire in the title
‫or in the text will show up.
‫Alright, and what else do we have?
‫Then, we have, yeah, two event handler functions here
‫to add a new post and to clear all the posts.
‫And, then we pass all of that stuff here as props
‫into these multiple components.
‫And, some of it really is prop drilling,
‫because, for example, here,
‫the header doesn't even need this post's prop,
‫but all it does is to pass this data
‫right into the next component.
‫So, result in this case.
‫And, the same thing for these other props here.
‫So, this component doesn't really need these props,
‫at least not these three here.
‫All it does is to pass them down.
‫And, so that's what we mean by prop drilling.
‫Now, let's also take a look at the component tree here.
‫As always, that's extremely important.
‫And, so, for example,
‫here we can see that this list component
‫is one of the components that needs the posts.
‫And, so for that, we need to pass the posts from app,
‫to main, to posts, and then to lists.
‫So, a huge chain of prop drilling right there.
‫Now, alright, then down here we have some more code,
‫which is not really relevant,
‫and especially not this one.
‫So, the archive here is not really important.
‫Again, we will mostly use that
‫for some other thing even later,
‫so even in another section.
‫But, anyway, let's now start
‫to solving this prop drilling problem
‫and learn how the context API works in practice.
‫So, remember from the last video
‫that basically the context API has three parts.
‫There is a provider, there is a value,
‫and then there are all the consumer components,
‫which will read the value from the context.
‫And, so let's start with the first step,
‫which is to create the provider.
‫So, in order to do that,
‫we first need to create a new context.
‫So, for that, we call createContext,
‫which is a function that is included in React.
‫So, just like use state or use effect.
‫So, make sure that it got imported here from React.
‫Now, into this create context function,
‫we could pass in a default value for this context.
‫However, we usually never do that,
‫because that value cannot change over time.
‫And, so it's actually pretty useless.
‫So, instead we usually pass in null
‫or we just leave this empty altogether.
‫But, anyway, calling createContext will return,
‫as the name says, a context.
‫So, let's call this a post context in this case,
‫because here we are going to store the information
‫about posts.
‫Now, this turned blue here,
‫because that's our fake dark mode,
‫which maybe you have also discovered
‫while going through this application.
‫Now, notice how, here,
‫the variable name actually starts
‫with an uppercase letter.
‫And, so the reason for that
‫is that this is actually basically a component.
‫And, so components always use here
‫the uppercase letter at the beginning.
‫So, let's just write out what we just did.
‫So, our three steps,
‫the first one is to create a new context,
‫so we have our context now,
‫and now we can pass the value into the context provider.
‫So, let's then go right here into our JSX,
‫because this is where we are going to use that component.
‫And, let's actually make it the parent component
‫of all of these ones right here.
‫So, let's place it really outside here.
‫So, post context, and now on there,
‫we read or we get the .providerproperty.
‫Then, we close that.
‫And, then we need to of course place this here
‫at the very end.
‫So, right here and there we go.
‫Now, this on its own, of course,
‫doesn't do anything yet,
‫because now what we need to do is to pass the value
‫into this provider.
‫And, so this is basically the second step.
‫So, the second step is to provide value
‫to the child components.
‫So, to do that,
‫here we specify the value prop on this component,
‫and then we enter JavaScript mode,
‫so that here we can then define an object.
‫So, here, we need an object,
‫which will contain all the data
‫that we want to make accessible to the child components.
‫And, so that's basically gonna be similar
‫to these props that we have here.
‫So, for example,
‫one of the entries in this object will be posts.
‫So, the posts should be equal to the searched posts.
‫And, so then that's exactly what we have here.
‫So, here we passed in a props called post,
‫which is equal to the search posts variable
‫that we have in this component.
‫And, so we can keep going and keep adding all of them.
‫So, we also want onClear-Posts to be handleClear-Posts.
‫And, of course, we also want to pass our function
‫to add posts,
‫so onAddPost should be equal handleAddPost.
‫Alright, so basically what we did
‫was to pass this state right here,
‫so this derived state
‫and these two event handler functions
‫into our context value.
‫So, we created an object which contains one property
‫for each of these values that we want to pass in.
‫Alright, and so let's now do the same thing
‫also for the search query.
‫So, search query actually equal to search query.
‫So, there we don't need to change anything.
‫And, then also set search query.
‫So, remember that having this
‫is exactly the same thing as this, right?
‫And, so then we don't need to write that second part.
‫Now, usually, we create one context per state domain.
‫So, basically, we would have one context only for the posts
‫and then another context only for the search data here.
‫So, in fact, this is actually called the post context
‫and so it should only be for these three parts here.
‫And, then we could also create a search context,
‫where we would place these two.
‫So, that would be a bit cleaner.
‫But, here, we are just learning how context works.
‫And, so that's not really a problem.
‫Now, okay, so now we have all our data here
‫inside our context.
‫And, so it's time to consume the context
‫in all the components that actually need access
‫to this data.
‫And, so let's do that in the next lecture.