Once we have covered why we would want to use the context in the first place.
We're going to set up our first context and that is going to be a product context.
So at the moment if we navigate to products J.S. within the context folder we're just gonna have a simple
comment with product context and the way we set up a product context first of all we're going to need
a react.
So I'm gonna set up a function but I can tell you right away that we're going to rename it a bit differently.
So I'm going to use again my basic function.
If you don't like it set up your arrow function but I'm not going to name this product because what
happens with this snippet it essentially creates the function with the same name that we had for the
file.
But in my case I'm gonna name this product provider.
But you're gonna see in a second why we're doing that so we can write product provider or product provider.
Doesn't matter.
I'm gonna go with products provider or you know what let's go with product provider just because I like
it better so product provider and then we need to get our context.
How do we get context from rehab.
Well since we have imported react that's a good start.
Then we can just set up our context using create context method.
So we're going to have some of variable and I'm going to name my product context.
I'm sorry it shouldn't be written like this.
So product context is equal to react dot and then we have a method of create context.
So once we have create context we have access to two components.
One is going to be provider.
And the second one is going to be consumer.
So we're going to use our provider to wrap around our application and then that way we can access it
anywhere in our application.
However we're gonna do a middle step where instead of just using the provider to wrap around our whole
application we're gonna pass it as a return within our product provider.
So we're going to use this component to wrap around our old application and then we're just going to
return our provider.
That's coming from product context as a return and it's gonna make a little bit more sense.
Obviously once we imported within the index J.S. and wrap around our whole application.
So if you're a bit iffy at this point I understand.
Just keep following along and we're gonna get there.
And the second thing that we're getting back from the rehab create context once we assign it to a variable
is a consumer component.
Now I can tell you right away that with an arrival of use context In fact you can just omit the consumer
previously that is before the arrival of used context took we needed to be cute and we either had the
option of sending up the render props or we had an option of using the higher order and component but
with the arrival of use context took.
In fact we can just admit it and then use the context now for to use context.
Look we're going to have to have access to a product context so before that we needed to export to things
the provider which was wrapped within a product provider as well as the consumer.
But now we just need to export the product provider which by the way we're doing that already as a default
as well as the product context.
So that's the reason why I'm going to set this up as a export.
And with all that in place we're gonna change our turn.
Like I said we're gonna use our product provider component to wrap our around our application and what
we're returning is product context.
So that of course is our variable and then like I said we have access to our provider component and
then within the provider component we do need to make sure that we pass in our children because please
keep in mind what we're going to deal with in the next yes we're going to import our product provider
component that is coming off course from the product and we're going to wrap our app.
So if you'd want our functionality to work we need to make sure that in our return we also of course
render the children.
That's the reason why we have product context then we're rendering the children.
And what's really cool about the provider that it has a value prop so we passing the value prop and
then within the value prop we can pass whatever we would want literally whatever you would want you
want to have a string you can pass a string you want to object you can pass in the object in our case
cases we're just going to be using always objects because there's just gonna be more than one name for.
But just to give you a very simple example we can pass in the hello let's save it then like I said we're
going to have to navigate to a index J.S. then we need to make sure that we're importing our product
writer so product provider that is coming from the context.
So let's hop up and let's look for the context and then let's look for the product and then I would
want to wrap my app in my product provider.
So I'm going to wrap my app around with a product provider.
So we're going to go with product provider and let's place the app within our component.
We're gonna save it and nothing changed which is a good thing.
However we obviously would want to test it out.
So I'm going to do is I'm going to head over two pages and I'm going to look for the product page and
then within the product page like I said prior to use context took our options was using the consumer
either that was by setting up a higher order component or that was using the render props which again
wasn't the worst thing ever.
But I mean it could get somewhat easier.
So in this case use context is much more simple option and since it is a hook we need to imported from
react and we have multiple ways that we can do that.
You could add a comment and then just say use context took but to tell you honestly I'd much rather
prefer using react dot and then just using the context I just find it importing it once and then using
somewhere within the component a bit annoying.
So even though you can keep it this way you can use used context.
I'm just going to type react dot use context.
Just please keep in mind that essentially it is exactly the same thing.
And the way it works is we would also need to import our context.
So remember there was two things that we're exporting.
We're exporting the product provider as our default.
And then the second one is a product context.
Now this guy we're not exporting as default since we cannot do that.
We can only have one export default.
So we need to name as our import.
So within a product I'm going to say import then the name is product context context like so and then
we're importing that from where we are we're heading over to the context and then we're looking for
the product.
And now within our component if we would like to access the data that we're passing from our context
well it's actually very simple.
We're just typing here a used context hook and then we provide a product context and I'm going to start
very simply by just console just to understand what is happening.
So we're gonna use react.
Like I said I'm going to use this syntax because I just preferred better.
So I just type in one place use context instead of importing it once and then running it the second
time and then I need to pass in my context whether that's user context whether that's khat context or
whether that's going to be a product context since we have only one man have a product context and now
let's navigate to a product.
And by the way again I muster up and again you guys didn't tell me if we're gonna head over of course
to our bar or header then this should be products some reason I keep skipping this and we have hello
from product page that's not what we're interested in fact what we are looking for is the console and
then within the console I right away have the whole why do I have Hello.
Because when we use the used context took and then we provide the context we're looking for while we're
getting back the data that we passed in within our value like I said string is the most basic value
that we could pass it and just to make things a bit more interesting instead of passing in the simple
string of Hello I'm going to set up a few variables here and we're gonna try to pass our value as an
object.
So the way it's gonna work I'm gonna say cost what's a greeting that is gonna be equal to Hello.
And second one is gonna be some kind of random project.
Some will say product is equal to an object and then of course I'm gonna have some kind of I.D. let's
say 1 and Title is gonna be I don't know some kind of product name.
So product and name and that if I would want to pass my value as a object I just need to set up the
object.
So first I'm going to reference the object and then I'm going to spread the object and then whatever
properties I would want in my object while I could use the fact that in E6 if my property value is going
to match exactly the name that I have for the property.
Can you step in here.
Simple greeting.
Now that is exactly the same as we would type reading like.
So again we're just doing a six shortcut.
So now I'm passing in two things and the moment we're gonna save it you're going to notice that instead
of getting back the hello.
In fact we're getting back the object and then within the object we have two properties we have one
by the name of greeting which has a value of Hello.
And the second one is the object itself and this is the case again where we're gonna use the the structure.
So let's say within the product I know that I would like to access the greeting Maha I'm gonna do that.
I could first get rid of the console log.
Since we already understand what we're getting back and I'm just gonna say that from this object I would
like to structure my greeting similar said Get me greeting from the object that I'm getting back and
then of course somewhere within a page you can just display since it is a variable.
I could just say greeting and then of course I'm going to have a hello from product.
And then this is gonna be my greeting and the same thing of course we can do with a single product that
we passed in.
Just please keep in mind again that in order to set up the context we need to run the methods of create
context that is coming from react.
Then we're getting back three things.
Provider consumer as well as the product context itself and then with an arrival of used context.
In fact we can omit the consumer.
And what we're doing is we're setting up a component that returns our provider.
So instead of heading over and wrapping our whole application with a product context provider we are
passing it as a return from our component.
Now why we are doing that because we're going to set up more complicated logic here on top.
That's the reason why we're using a separate component that in fact just returns our provider.
And then within our provider we have a value prop that can accept anything we would want in our case
we just had some dummy data.
But of course in future videos we're going to set up our product and then within the index we just need
to make sure that we use our component the component we created that returns a product context provider
and then within the component that we'd like to access that data we need to get to things we need to
get used context from react.
And then within the use context we just pass the product complex and then we're gonna get back whatever
we're passing in since we were passing in the object that's the reason why can the structure these properties
that I have passed and has my values.