In the last video we started talking about how we were going to create a language store component the
language store is going to contain all of our business logic and our data and make it available to other
components inside of our component hierarchy over the context system.
So in this video we're going to start to create this language store component.
We're going to go a little bit light on the description of exactly what's happening because I think
everything's going to be a lot more clear once you see the completed example.
So let's get to it.
I'm going to open up my code editor and I'll find the language context.
Yes file.
So inside of here we're going to continue to create this context object and export it.
But in addition we are also going to create this language store component.
So inside of language context.
I'm going to first remove the export default statement right there and I'm going to instead assign it
to a variable called context like so.
Now notice that this is defined with a capital C that is very important.
Please make sure that you use a capital C as well.
And then after that I'm going to declare a new class based component called language store and that's
going to extend re-act component so inside of this class right here we're going to set up some state
property that's going to maintain the currently selected language.
We're also going to implement a callback function inside there that gives other components the ability
to change that currently selected language so inside of language store I'm going to set up my state
object and I'm going to say language is by default English.
And then after that I'm going to implement a callback function that we can pass off to other components
so they can change the state property.
So I'll say on language change this is going to be a callback function.
So I'm not going to define it as an arrow function will say that this is going to get defined.
Or c me cold with the new language as an argument.
And so we will call inside of a distraught set state language like so.
OK so this right here is all of our business logic.
It's our current set of data.
The current selected language.
And we also have the ability to change the currently selected language as well.
So now the next thing we're going to do is define our render method inside the render method.
We're going to set up a language context provider.
And as the Value property we're going to pass off the currently selected language and that callback
we just created as well.
So this render method with the provider is how we're going to share their current data and with the
ability to change it with other components inside of our application.
So in my render method I'm going to return context with a capital C right here.
MEMBER We assign that context we created to capital C context dot provider.
The value is going to be the combination of everything out of our state object.
And this callback function as well.
So the value is our all of our data and the ability to change that data as well.
So as my value I'm going to put in a empty object inside of here and I'm going to add in all the different
values from my state object.
So say dot dot dot dot dot state.
Remember the syntax right here very similar to what we did with redux earlier.
We are creating a new object.
We're taking all the values out of our current state object and adding them into that object.
And then in addition we're also going to take this callback function and add it in there as well.
So on language change
then going to close off that provider tag like so now the language store is going to be used or rendered
at some location inside of application.
Remember any time that we place a provider only the components underneath it or only the components
that get wrapped by this provider will have access to the context that is implemented by this provider.
So essentially we need to make sure that this language store component is going to wrap all of these
different components when it finally gets rendered to do so inside of the provider tag.
We're going to place a set of curly braces and reference this prop's dots children.
So what's going on here.
Well a quick reminder back to like the first section of this course one of the things that we learned
very early on was that we could create our own components are going to show you down here is a quick
example I'm going to delete this really quickly so you don't have to write this out if you don't want
to.
We saw that we could create our own components like say language store
and we could pass our own component some amount of GSX like say a div or a form or even another component
that we create like say language selector or whatever it might be whenever we passed some GSX to a component
we creates these components right here show up inside of that parent component on Propp start children.
So this right here is what's going to make sure that we can render some components inside of our language
store.
And so all the components are rendered inside of it are going to have access to this context object
that we just implemented.
All right.
Now one other quick thing I want to mention here.
Why did we use a capital C on the variable context.
Well anytime that we create a component ourselves and tried to render it out using GSX we have to use
a capital C for that variable.
If you use a lowercase like so like a lowercase context re-act is going to think that this is a normal
vanilla HDL element that you're trying to render out like say a div or a form or a span or whatever.
So any component we create has to have a capital letter.
That's why we used capital C context OK.
So that's all we have to do for the language store class.
It's not the last we do inside this file is make sure that we export the language store and make it
available to other files inside of our application.
We also have to continue to export this context object as well.
And I'll tell you why that is in just a moment.
So first I'm going to export our class language store.
Notice how I only use the word export here.
So we've set up language store as a named export.
That means that anytime that we try to import it we're going to have to use the curly braces and say
like language store like so.
In addition at the bottom of the file I'm also going to export default context as well.
Just as we did previously.
So now any time we import the language context file we will either write out import contexts or really
language context because for a different export we can rename it when we import it or we will write
out import language store if we want the component itself.
So those are the two things that we can now import from this file.
All right so that is our language store component.
It encapsulates all the data of around the currently selected language and it also implements the ability
to change that data as well.
So now that we've put this component together we'll take a quick pause right here and when we come back
the next section will figure out how to make use of it.
So quick break and I'll see you in just a moment.