In this video.
Let's see how we can use the context that we create in the previous video.
So what we are going to do is that we want to access the context data from here inside the component.
A So to achieve that, we need to wrap the context provider with the component that we want to have
access to it.
So let's get to the index.
That is where we are, what rendering the app component.
So any component that we pass in into app, you're are going to have access to it.
But before we come here, let me show you the another way of doing that before coming here.
So APP is going to render other component components A component B.
So here we need component A, so let's require the component A here.
So let's go ahead and then render this component
as component a save it.
And let's say, yes, we have component A, so to be able to access the data inside the off, we need
to wrap with the of provider.
Remember, we have this function inside the context.
We have two functions here.
The first one is a user of context and the second one is the user of provider and this is what we need.
So inside the app, let's bring in the user of provider.
So next thing is I need to wrap this component.
So instead of death, I'm going to use the user of provider and now this one has become the children.
So we inside the user of context, you can see that we are passing in the children and this children
refers to the component.
So with this one, I have access to any data inside the user of provider.
So let's remove this one from here and you can see that it still works.
So now we have the opportunity to access this particular data.
So how are you going to do that one?
So insert a component that is component A, let's see how we can consume that data.
So to consume that, we need to bring in another hook called use contexts and use context is a hook
that help us to use the context data and I have the import as that.
Next is we need what is called the of context.
Remember we have two functions here.
The first one is the user of context.
The second one is the provider.
So to be able to use context, we're going to use the user or context from the instance of the create
context.
So now inside component A, we are going to bring in the user context.
So here is the clear inside component.
We are going to call use context and then we pass in the user of context.
So what comes back contains all the data inside the user of context for this one are assigned to a variable
called user.
So here if I console the log user, now let's check in the browser, let's open the console and here
we can see that we have the object which is the user.
So I can go ahead and then down the user to the DOM.
So let me use H to here
and I will say name is going to be user dot name.
So let's save it.
And you can see that we have, John.
So any component that you want to have access to the data inside our contexts, we are just going to
wrap the provider around it.
So if you want component B, we are just going to import that component and place it inside here.
But by convention or ideally we use the provider root.
So inside the index is where we are going to wrap our provider to the app.
That is the main entry point.
So here I'm going to bring in the user provider and here we go.
So I remove this one and now I have wrap inside my app.
So inside the app I can remove this one and remove this one also.
So if I save it now let's see.
You can see that everything remains the same.