In the last video we made use of a context object to set up a default value and get that into some nested
child component.
At present we are just console logging out the context value.
Now one thing I want to mention right now is that if you click on these different flag icons up here
you're not going to see the language change however you will see a console log out over here always
of English which is kind of interesting.
So why is that.
Well the answer right now is pretty simple.
If we open up our app component remember that any time that we click on a flag we call on language change
which in turn is going to invoke this dot set state.
Remember that any time that we change the state of a component that component is going to re render
along with all of the components that are shown underneath it.
So at present any time we click on a flag we call set States Asprey renderers.
That is going to cause user create to re render and in turn the user create component is going to cause
our button component to re render as well which results in a console lock.
However the console log is always referencing the this stock contex property.
And at present we do not have any way to change that context value inside the context object because
we wired up a default value when we created the context object.
So at present the value inside the context object is always going to be the string English.
And we do not currently have a way to fix it.
OK so now that brings us up to speed.
So now I want to do a little bit more work on our button dodgiest file.
I'm going to remove the console log right here and then we're going to add in just a little bit of logic
to this thing to change out the value inside of the text or the button itself based upon the current
context value.
So you're going to say Konst checks is going to be this context equals equals equals English.
So if this context is equal to the string English then I want to assign to the value or kimmey to the
variable text the word submit.
Otherwise I want to assign the Dutch word for submit which is I do not remember it off the top of my
head.
Vore leggin
OK so that right there is a Turnier expression which we've used several times throughout this course.
So if the context value holds a string English we're going to say that Textus submit otherwise it will
be for leggin.
So now inside my button tag I'm going to remove that I'll put down some curly braces and I'll reference
text like so OK.
So now our button component should update itself appropriately when ever the value inside the context
object changes.
Let's now open up our field component and do the same thing once we have both the button and the field
wired up appropriately.
We will then figure out how to change the value inside that context object.
So inside my components directory I will open up the fields file and inside of here we're going to go
through the same process that we just went through inside of button at the top.
I will import my language context from dot dot slash contex language context.
Then inside of my class I'll say static context type is language context like so.
So remember this step right here is what forms a link between our class
and the context object.
So now we can reference the value inside the context object with this context from inside of our component.
So we'll now do the same thing that we did just a moment ago inside of button inside the render method.
I will say Konst text equals this context equals equals equals English.
So if context is equal to the string English then I want to have a string name.
Otherwise I want the Dutch word for name which I need to look up again.
It is numb or however it is you pronounce that.
I apologize again Dutch speakers for butchering that word.
All right so now inside of our label rather than always printing out name I will instead printout text
inside of curly braces like so.
All right.
So let's now do a quick test.
I'm going to open up the language context.
Yes file.
And I went to change the default value inside of our context object.
So instead of English I'll say Dutch like so.
Now if I flip back over to my browser I should see Nahm for the label and for leggin for the button.
Cool.
Right now I'm going to change it back to a default of English save it and then I should go back to seeing
name and submit like so.
OK.
So this looks pretty good.
It's now the last thing we have to do is figure out how to change the value inside the context object.
At present we've only learned about using a default value which is only going to set the value inside
of context one time when the context object is first created.
So let's take a quick pause right here and we'll figure out how we can change the value inside that
context object inside the next video.