Let's make sure that we provide an additional prompt to our dropdown to customize the label that is
displayed right above it.
So back inside my editor, I'm gonna go to the translator JSF file.
So this is the one we just created.
I'm going to find the dropdown and I'm going to add in a new prop to it.
We'll call simply label.
How about for our dropdown to select a language we say something like.
Well, select a language.
And then over inside of our drop down dodgiest file.
We can receive that label, Propp.
And use it.
To customize our label down here, rather than showing the hardcoded, select a color, we will show
whatever.
The label Propp is.
We'll save both those files.
Look back over.
And there we go.
OK, Alex, good.
Now, back inside of our Translate file, we've got our drop down put together and we can select a language.
So the next thing we need to do is make sure that a user can type in some text that will actually get
translated.
So for this, we go back to over to our markup.
We pretty much just want to show a very plain text input with a label of enter text right above.
Nothing too special to it.
So this will be a normal input element.
We're going to make sure that we set up a piece of state to track whatever user types inside their.
Nothing.
Nothing too much to it besides that pretty straightforward in nature.
So back over here, inside of our Translate file, right above the dropdown, we'll show an input.
We will also create a piece of state we'll call this text and set text, so it's gonna be whatever the
user types into that input.
Well, initialize it with an empty string, and then we could set up some event handlers and the value
prop on that input will set up value as text and on change.
As usual, we're going to put in a call back right there.
We will receive the event object, which I'm going to abbreviate just as E!
And then we will call it set text.
With E. Argott value.
Let's save this.
And make sure that text input shows up and we can type inside of it.
Yep.
We should probably add in a little bit of styling on the thing just to kind of match the dropdown.
So we're going to go back and add in a couple of elements around it just to provide some class names
and stuff like that.
So around that input, I'm going to put in first a div with the class name of UI form and I'll close
off the div on the other side of the input.
Then inside that, I'll put in a day with the class name of field and close off the div on the other
side, the input.
Then right above the inputs, I'll put in a label.
With a text, enter text.
And then on the input itself, I don't think we actually need anything else besides that.
I think that's all the elements and additional class names we need.
Let's save this now.
Yeah, that looks all that better.
Then we can enter some text right there.
And in theory, as we do so, we're gonna take that text in the currently selected language translated
and then show the output right below.
Well, I think that we've got just about all the kind of preamble stuff that we need.
Now, the last part we have to really start to go through is that convert component that is going to
take in.
The currently selected language and whatever the text, the user has entered and do the actual conversion
process.
So let's start to tackle that component in the next video.