In the last couple of videos we got some information out of our context object and into our button and
field components.
The only problem right now is that the value inside of our context object is fixed and unchanging.
We can't change that context object value because we initialized it by using a default value the default
value is as you would guess the default value if we want to change the value inside of our Context object.
We have to create a component that is going to act as a source of information for us.
That is the app component.
Our app component knows what the currently selected language is because remember we set up all that
state stuff inside of the app component.
So we now want to communicate some information from the app component into the Context object to do
so.
We're going to create something called the provider component.
This provider thing is not the same provider that we made use of.
Back with back with the re-act redux library remember with reaction redux we had that provider component.
This is a totally different provider.
They just happen to share the same name.
So we're going to use this provider component to update the value inside of our Context object.
I would love to show you a bunch of diagrams to tell you how that is done.
But honestly it's going to be easiest to just write out some code first and then take a look at a couple
of diagrams.
So I'm going to flip on over to my code editor and we're going to write out some code inside of our
app component to take the currently selected language and communicate it down to our context object.
So to do so at the top of this file I'm going to import our language context object from up one directory
contex language context like so then I'm going to find the components or the set of GSX inside of my
render method that need to get some information out of my context object.
In our case the render method has user creates remember user create inside of it shows the button and
the field.
So it's really user create that needs to know some information out of that context object.
So I'm going to wrap user create right here with language context dot provider like so.
All right now I know that looks a little bit weird.
Let's just write out a little bit more code here.
When we render language context not provider we're going to assign a value prop.
Now this is a very special property name.
I did not just make this up off the top of my head as we do with many proper names the proper name of
value is very special to a provider.
So to the value language to pass the value that I want to put inside of my context object.
So this is where I want to communicate some information from my app component and get that value into
the Context object.
In our case the information that we want to communicate from app to the Context object is our state
language property.
This right here.
That is the information that I want to get into my Context object.
So anytime that I change that state language property I want to take that new value and push it into
the provider.
So to do so I'm going to find value right there and then I will assign it this dot state DOT language.
Like so
OK.
So we're going to look at some diagrams to explain exactly what's going on right here.
But first let's flip over to our browser and test this out very quickly.
So back inside my browser I'll do a hard refresh and then I'm going to find the language selector up
at the top and I'll click on the other flag.
And when I do so I should see that new text appear.
And then I built to click on the English flag again or the American flag again and see the English text
appear.
And so now I can freely toggle between the two translations for my form.
So clearly making use of this provider thing got some information or new information into our component.
But of course now let's take a look at a couple of diagrams and figure out what's really going on here.
Actually you know I'll tell you what.
First let's take a quick break and then we'll take a look at a couple diagrams to figure out what exactly
the provider is doing.