In the last video we wrapped our language store component around language selector and user create.
We did this because we needed to make sure that the language selector and user create both had the ability
to access data or change data inside the language store.
Now remember it's not actually user create that needs to access data or change data.
It is the components nested inside of user create that needs to.
We're not going to open up our language selector and make sure that we wire up a callback function to
it that will allow the language selector to change the currently selected language through our language
store.
All right so I going to find my language selector.
And then at the top I'm going to import our language context from up one directory contex language context
like so.
Now notice in this case we got the default export from language context.
So this right here is that same context object that we've been talking about for a pretty good while.
We can access that context object inside of our language selector by either wiring it up to this context
through that context type's property or by setting up the consumer.
Now in the case of our language selector component this thing doesn't need to access any other context
object.
So for this one we'll use the this context approach.
OK.
So inside my class I'll say static context type is language context like so.
So remember that's going to hook up our language selector to the language context.
So now inside of your we can console log this context like so.
And we should see some information coming out of our language store.
Specifically everything inside the state object and the On Language Change callback as well.
Let's try flipping back over to our code or see me to our browser.
Now we should see that console log right here.
So this is what we are getting from the language store.
We've got the currently selected language and we've also got the callback to change that language as
well.
So now inside of the language selector I'm going to remove that console log that we just added And now
we are going to make sure that we change our currently selected language.
Any time a user clicks on a flag by changing the callback right here so our callback to change language
is no longer present on the Propp subject.
It's no longer being passed in from our app component.
Instead it is located on our context property so we can modify both those to be this context not on
language change.
Now really quickly let's add that console log back in and then we'll save this and test it out inside
the browser really quickly.
So if I now click on these two flags up here I'll see that the language is correctly changing.
OK so that's definitely working out pretty well.
So let's take another quick break.
When we come back in the next section we're going to move over to our button and our field components
and make sure that they access this data off the new contex property as opposed to the previous kind
of language context they were using.
So a quick pause and I'll see you in just a minute.