We are all done working on our drop down component.
Now, you'll notice that in the original mockup I showed you're going to display some different colors
and then change the color of some text on the screen if you want to make that update on your own.
Feel free to do so.
Otherwise, birds can move on to the next component, because I'm sure you could probably figure out
how to do this on your own.
OK.
So here's our last little widget we we're gonna put together.
But this is gonna be very similar to the language translation app that we put together in the second
video of this course.
A user is going to enter in some text right here into a text input.
They will then select a language from a dropdown.
We'll then translate the language and show the result down here at the bottom of the screen.
As you could probably guess, we are going to reuse our dropdown component right here.
The one that we just built rather than displaying some different colors.
We will show a list of languages that the user can select.
All right.
Now, this component or this widget is going to be a little bit more complicated than some of the other
ones we have put together.
So let's get a better idea of some overall architecture.
OK, so to organize this little widget, we are going to create a couple of different components.
We are not going to put too much code around us inside of our app component because it would just mess
it up or kind of muddy it up a good bit.
Instead, we are going to create a new translate component to translate component is gonna be responsible
for showing all of this content on the screen.
The translate component itself is going to show an instance of the drop down component to allow a user
to select a language.
And it will also show a convert component.
That convert component is going to be responsible for taking in some text and some currently selected
language and doing the actual language translation and showing that content right there.
You can really think of the convert component as just being responsible for that right there.
We're not going worry about the convert component too much just yet.
Instead, we're gonna first focus on just translate and the dropdown, making sure that we can show
a list of language options and set a currently selected language and store that inside the translate
component.
So, again, right now, we're just not going worry about convert to much.
OK.
So options, first off, what is this going to look like?
Well, as you can guess, this is gonna be the selected or the list of different languages.
A user can select.
Options is going to be, once again an array of objects.
Each object will have a label and a value.
The label is going to be the actual language itself or the name of the language.
So right now, we're just going to worry about putting in languages of Africans, Arabic and Hindi.
Then the value for each of these is gonna be a language code.
So the value will be a F for Africans, a R for Arabic and Ajai for Hindi.
The value or the language code in each of these has a lot of meaning attached to it.
So I want to tell you right now that you have to use a value of A.F. Aiyah and Ajai.
I'll show you why that is.
And just a little bit as we start to move towards actually converting the language into the target language
or the excuse me, the supplied text into the target language.
Right now, please just make sure that you eventually put in the exact same values as I do.
That's give me options.
We're going to pass options down as a prop into the drop down component so user can select one.
Along with that, we will also pass down the currently selected language and asset language callback.
So whenever the user changes the currently selected language, we will call select set language that
will update our piece of state inside the translate component.
Essentially, this entire state and prop system under percent identical to what we currently have.
Back in our code editor in the app J.S. File, where we've got dropdown with some currently selected
item, some drop, some callback to change the currently selected item and the set of options a user
can pick from completely identical.
All we're doing is changing what the options are.
OK.
Let's just start with that right now.
And then after we get that little part put together, we'll then start to worry about that other convert
component.
So quick pause and we'll start to put together this translate stuff in the next video.