In the last video we saw the usage of the consumer component to get information out of a Context object.
So remember that is the second way that we can use to get information out of context.
Now the most obvious question about the consumer is why would we use this as opposed to just using this
context which looked a little bit more straightforward.
Well the answer is that we will make use of consumer any time that we want to get information out of
multiple different context objects inside of a single component using this context in conjunction with
that context type property is only used any time we are accessing a single context object inside a component.
So let's think up an example where we might have multiple different contexts objects so we want to get
information from inside of our buttons.
JS file here's my idea.
I think that we should create a second context object called Color context and this will have a value
of a string read if the value is read.
Then we're going to want to have our button style itself as a red button as opposed to the default blue
that it is right now.
So that means that we're going to need to set up a second Context object.
We will set up a second provider and then we'll try to access the second context object inside of the
bun.
And that's going to be in addition to the current language context that we are already accessing inside
there.
So this will be an example where we are trying to access multiple different contexts objects because
we are accessing multiple different contexts objects.
We will have to use the consumer for both of them.
We cannot use this context in this case so let's try this out.
I'm going to flip back over to my code editor and inside my contex directory.
I will make a new file a file called Color context.
Yes.
So inside of year we are going to create a new context object and export it.
So I will import re-act from react and then I will export default re-act not create context like so
now you do not always have to assign a default value if you want to.
You can here by passing it as an argument to create context.
So in this case we might want a default value of like red or something like that.
But just to be clear we are going to set up that provider that's going to stuff a value into the Context
object anyways.
So we don't have to really provide a default value here because we're going to get a value into it by
using that provider.
OK.
So there's our color context.
Now we need to wire this thing up inside of our outdoor J.S. file inside of aptest Yes at the very top.
I will import color context from dot dot slash contex color context.
I'm then going to find my render method where we show user create right here.
So I want to make some data available to the button component that gets rendered inside of user create.
So I'm going to wrap user create with a new color context provider.
It doesn't matter if we put it outside like right here or inside of the language context no difference
either way.
We just need to make sure that we somehow wrap user create with or color context provider.
In this case I will place it outside just for fun no particular reason.
So out here I will place color contacts dot provider and I'll set the value to be read.
So in this case we're going to hard code the value as read.
There's going to be no decision making here on what value we put into the context object.
I'll then close off the color context provider Whoops.
Where's my daughter.
Here it is right there down there and then I'm going to fix up the indentation like so.
So we now have two different context objects that can provide information to the user create in every
single component inside of there.
So I'm not going to save this and then I will open up the button not just file.
Now inside here we want to import the color contex we just created and we're going to use its consumer
component to access the value inside of it and change a class name on the button component right here.
So we if we want to show the button as red we will replace primary with the string red instead.
So if I say that really quickly just as a quick example you'll see the button appears as read over here.
So essentially we want to access that context value and decide either to put in primary or read right
here.
So at the top I'm going to import color context from dot dot slash contex color context and then because
I want to access the value that context object and change some property of the button.
I'm going to wrap the button in this case with color context.
Consumer.
Now here's the part that gets a little bit nasty.
Remember the only child that we passed to a consumer component is going to be a function.
So we now need to pass a function as the only child to this consumer and that function is going to receive
the current value inside of it.
In this case read and then from that function we're going to have to return this entire block of GSX
right here.
So it's going to be a little bit nasty syntax but we can figure it out.
So I'm going to add in a child here that the set of curly braces.
This is going to be a function I'm going to give myself a little bit of space.
And I'm going to cut and paste the button and everything inside of it into that function like so.
So now this function will be called with whatever value is inside of our color context object I could
refer to that argument as value.
But you'll notice we already have a variable inside if you're of value as well.
So just to be a little bit more clear I would probably call this something like color because that's
what we are really receiving here receiving the color that we're supposed to use for our button.
So now I'm going to use a little bit of yes 20:15 syntax to get that color into the class name string
right there.
So I'm going to wrap the thing with curly braces.
I'll then put in a set of tactics around the string and then I will replace primary with Dollar Sign
curly braces color like so.
So we're now taking whatever string is inside of our color context and using it as a class name for
our button.
Let's now save this and see what happens.
So I can refresh the application and I see that I get a button of Samit or a red button right there
and I can still click on the different flags and see the translation as well.
If I go back over to the outtalk J.S. file I can change the value of red right there over to primary
and I will see the button go back over to being blue like it was before.
So you can imagine that if we had like some type of color selector here in addition to the language
selector we could very easily hook up that color selector to our component state and of the Epcot J
s component and have that state property decide either to show the text primary or red or whatever we
need to show.
OK.
So that's pretty much it.
That is how we consume multiple different contexts inside of a single component.
Now as you can see the syntax here is a little bit nasty because we are essentially stacking up these
different consumers and each one needs to have as the only argument a function.
And so like I said yeah gets kind of nasty.
A very easy way to clean this up would be to have this button stuff right here.
The GSX get returned from a helper function so we could make a another helper function inside of your
like render button.
And maybe that would take a color as an argument.
So now I can remove the entire button GSX block into there return it and then inside the arrow function
right here.
I can return that to being just one line like so and call this render button and pass in the color.
And then I can fix up the indentation just a little bit.
So this is a slightly more clear way of doing things rather than having that kind of nasty nested function.
But still you know it can it take a little bit of time to figure out what's going on here.
Let's try saving this really quick and just making sure everything still works.
Yep everything still works if I go back over to Epcot.
J.S. I can change my value to read now and I'll see the red button appear.
All right so that's pretty much it for context at a very basic level.
We've now learned that with the context system inside of react we are sharing information remember that
is the purpose of the context system.
We have two ways of getting information into a context object and two ways of getting information out
when we are getting information out if we are consuming information from a single object.
We can set up the context property by defining that context type on our component class.
Otherwise if we want to consume multiple different context values we have to make use of the consumer
in the same way that we just saw it inside this video.
All right now we have a better idea of how context works.
Let's take a quick pause right here and continue in the next video.