In this video we're going to put together the language selector at the top of our app component in order
to record what the currently selected language is.
We are going to be making use of component level state.
So no redux no store nothing like that just normal component level state.
I will open up my apt js file and at the top of my app component I'm going to initialize my state object
I'm going to give this a language property and by default I will set it to English like so then underneath
that I'm going to find my div I'm going to remove the text inside there and then turn this into a multi-line
GSX expression like so
and then inside of there I'll place a new div or give it the text select a language and then after that
I'm going to place two icon components or two icon tags.
So I'll say I class name flag us.
So that's what's going to get a flag to appear on the screen.
And then right after that I'll put another flag that has a class name of flag and l like so
we can now save this and we flip back over.
We should see the two flags appear on the screen.
Cool.
So now the next thing we need to do is add on some Click event handlers to both these tags right here
and make sure that any time that a user selects either one we call some callback function that's going
to update our currently selected language.
So inside of the first flag I'll add on an on click Propp any time that someone clicks this I'm going
to call a callback method called this dot on language change and I will invoke that with the string
English like so I'm going to zoom out for just a second so you can see that entire line and then I'll
do just about the same thing on the second flag as well.
So I would call on language change but then this time I'm going to say Dutch as my language.
Instead
So now we will define our Lola callback method on language change and make sure that we take the appropriate
argument and update our language because of state.
Now above our render method.
I will add on language change.
I'm going to make sure that I defined this as an arrow function because it is a callback method that
we are passing off to something else inside of our application.
It's going to be called with a new language that the user is selecting.
And so I'm going to take that new value and update my state with it.
So I will say set States language is language like so.
And of course we can abbreviate this simply as language because the key and the value are the same.
Now finally to test this out I'm going to put down at the bottom of my render method but inside that
bottom div right there I'll simply say this dot state DOT language just to make sure we can toggle between
the different languages.
It's not going to save this I will flock flip back over to my browser.
By default I should see English and if I click on the other flag I should see Dutch instead.
And I should build to toggle between the two.
OK so that looks good.
Now we've got the language selector put together.
Let's take another quick pause.
When we come back the next video we'll put together the where is it user create form that's going to
contain our field and Button components.