In the last video we put together our language story component.
The next thing we're going to do is import this into our app component and render the language store
itself by rendering the language store.
We're not actually putting anything on the screen.
We're just implementing the Context object inside of here and making the current state and the ability
to change it available to other components inside of our component hierarchy.
So I'm going to change on over to my outtalk J.S. file.
I'm going to find the current import statement that we have for the language context right here rather
than importing the Context object.
We want to import that component that we just created.
We're going to show this component exactly one time inside of our application because we only want one
copy of the currently selected language to be floating around our app.
So inside the uptalk J.S. file I want to change that import statement to curly braces language store
like so.
Remember we are using the curly braces here because we are trying to import a named export value.
So there is no export default here it just says export which means to import it we have to use those
curly braces and then list out the exact name of the variable that we're trying to import.
So now inside of my render method I'm going to find where we previously had language contexts so we're
no longer going to set up our provider inside of here because the app component is no longer responsible
for maintaining our business logic or our application data.
So I'm going to remove the provider and instead of going to wrap user create or see me on I'm going
to wrap user create We're going to actually implement this little bit higher I'm going to wrap everything
inside that div with language store like so.
So you might be curious.
What do I hesitate there.
Well I made a little bit of a mistake.
Remember we want both user create and a language selector component to have access to the data inside
of a language store user create wants to get the currently selected language language selector wants
to get that callback function it wants to get the ability to change the currently selected language.
So that's why we have to wrap both the language selector and user create with this new language or component.
Now we're going to continue to do a little bit more of a refactor to our outgas file the js file is
no longer in charge of maintaining the currently selected language.
So we will remove this state initialization at the top the apt.
J.S. file no longer needs the ability to change the currently selected language so we will remove that
callback right there as well.
And then finally the language selector component is not going to get the ability to change the currently
selected language from the app.
Instead the language selector is going to get this callback from our context object instead.
So we can delete that Propp right there because it's not going to get that callback from the app component
anymore.
OK.
So I going to save this.
I'm going to flip back over to my browser really quickly and you might notice that we have a little
error message over here.
I think I probably made a little typo.
Yes I did.
So in spite of the language store component you'll notice we reference on language change right here.
That was my mistake it should be whanged on language change.
This starts on language change like so
OK.
That should be better.
Let's try saving this now.
And now we can see our application running.
Now these buttons are not going to work.
And if you click on them you're going to see an error message.
So we still have a little bit more work to do.
So let's take a quick pause right here in the next video we're going to wire up our language selector
component to that new context object and that's when you'll start to get a better idea of what's going
on here.
So quick pause and I'll see you in just a minute on.