Let's get started on this new translate component.
Back inside my editor.
I'm going to find my components directory.
Inside there, I'll make a new file called Translate Dot J.S. inside of here at the very top.
I'm going to import react from react.
I will also import my dropdown component.
From dropdown.
From react, we probably also need to get the use state hook as well.
Let's just get that right away.
And then going to declare.
Why translate component?
And then I'll export it.
At the bottom.
Now, usually we return and each one inside, if you're just get everything working, I think we've
done that enough.
So let's just start putting some code inside of your right away.
Inside of translate.
We're going to return a couple of different elements, but right now we'll just return a d'Hiv, an
insider, we want to have an instance of our dropdown.
The translate itself is going to provide some options to the dropdown.
It's also going to provide the currently selected item and a callback to change the currently selected
item.
Let's first write out our list of options.
We're going to hardcoded once again right above our translate component.
So up you're going to put in options.
These are gonna be the possible options a user can select.
We're gonna have the same options we just saw in that diagram, though, this one right here.
We'll start off with a label of Afrikaans.
With a value of A.F. And again, please make sure you put in exactly A.F. right here.
I'll show you why that is very important and just a little bit.
The next one we're going to put in, what was it?
Arabic.
But the value of a car.
And then finally, Cindy.
But the value of ajai.
Once we are done with the overall translate component in this entire widget, I'll show you how you
can very easily add an additional languages if you want to add in another language, such as Spanish
or Russian or whatever else.
Very easy to do.
I'll show you how to do that.
Once we finish all this stuff up.
We're going to take that list of options and provide it to our drop down component.
Then after that, we're going to also make sure that we initialize a selected language piece of state.
We're gonna pass that selected language down into the dropdown.
Along with the on selection change callback as well.
Will define that piece of state first.
We'll call it language and set language.
And by default, we'll provide an initial selection of the first language inside the options array.
The default value for this will be options at zero.
Like so.
So we need to provide both the current selection and a callback to change the selection down into our
dropdown component.
Remember, the drop down component expects to receive these props with some very specific names.
If we forget what those names are, we can always go backwards, the drop down component itself and
just get a quick reminder that we are expected to provide a selected prop and on selected change prop
as well.
For us, we're going to say selected is going to be language.
And on selected change will be set.
Language.
OK, so that should be enough to at least get something visible on the screen.
Now, the last thing we have to do is go back over to our apt J.S. file and make sure that we show the
translate component, the back inside of APJ s.
Up at the very top, I'm going to import.
Our new transit component.
Then down inside the app component.
I'm going to first clean up some the code that we just added in around toggling the dropdown.
That was just a very quick demonstrations so you could understand why we needed to clean up that event
handler.
So I'm going to delete the show dropdown piece of state.
I'm going to delete the button.
And I'm also going to delete the dropdown we accreted inside of here for right now as well.
And you know what?
We also don't really need this selected piece of state anymore as well.
We're just gonna turn it div.
That shows translate inside.
Let's save all this.
I'll flip back over.
And, oh, looks like we need to make one little update there, we never actually made the label of
the dropdown a configurable prop, so we should update that.
But more importantly, for right now, we do see a dropdown.
I can select one of the different languages inside of here and I can still click outside of it to close
the dropdown as well.
So this is a good start.
But certainly let's make sure that we do provide a label as a prop so that we're not always seeing selecta
color right there.
OK.
So we'll take care of that in just a moment.