1
00:00:01,590 --> 00:00:05,820
Let's make sure that we provide an additional prompt to our dropdown to customize the label that is

2
00:00:05,820 --> 00:00:06,870
displayed right above it.

3
00:00:07,660 --> 00:00:11,310
So back inside my editor, I'm gonna go to the translator JSF file.

4
00:00:11,400 --> 00:00:12,720
So this is the one we just created.

5
00:00:13,740 --> 00:00:17,190
I'm going to find the dropdown and I'm going to add in a new prop to it.

6
00:00:17,340 --> 00:00:18,510
We'll call simply label.

7
00:00:19,700 --> 00:00:22,860
How about for our dropdown to select a language we say something like.

8
00:00:22,970 --> 00:00:25,340
Well, select a language.

9
00:00:27,140 --> 00:00:29,390
And then over inside of our drop down dodgiest file.

10
00:00:30,790 --> 00:00:32,770
We can receive that label, Propp.

11
00:00:34,290 --> 00:00:34,860
And use it.

12
00:00:35,840 --> 00:00:42,590
To customize our label down here, rather than showing the hardcoded, select a color, we will show

13
00:00:43,400 --> 00:00:43,970
whatever.

14
00:00:45,080 --> 00:00:46,640
The label Propp is.

15
00:00:49,340 --> 00:00:50,510
We'll save both those files.

16
00:00:50,720 --> 00:00:51,380
Look back over.

17
00:00:51,830 --> 00:00:52,380
And there we go.

18
00:00:54,160 --> 00:00:55,010
OK, Alex, good.

19
00:00:56,920 --> 00:01:03,100
Now, back inside of our Translate file, we've got our drop down put together and we can select a language.

20
00:01:03,610 --> 00:01:07,840
So the next thing we need to do is make sure that a user can type in some text that will actually get

21
00:01:07,840 --> 00:01:08,440
translated.

22
00:01:09,160 --> 00:01:11,720
So for this, we go back to over to our markup.

23
00:01:12,280 --> 00:01:17,230
We pretty much just want to show a very plain text input with a label of enter text right above.

24
00:01:18,100 --> 00:01:19,420
Nothing too special to it.

25
00:01:19,800 --> 00:01:21,880
So this will be a normal input element.

26
00:01:22,210 --> 00:01:25,840
We're going to make sure that we set up a piece of state to track whatever user types inside their.

27
00:01:26,900 --> 00:01:27,290
Nothing.

28
00:01:27,620 --> 00:01:30,440
Nothing too much to it besides that pretty straightforward in nature.

29
00:01:31,820 --> 00:01:36,310
So back over here, inside of our Translate file, right above the dropdown, we'll show an input.

30
00:01:38,050 --> 00:01:43,890
We will also create a piece of state we'll call this text and set text, so it's gonna be whatever the

31
00:01:43,890 --> 00:01:45,240
user types into that input.

32
00:01:46,580 --> 00:01:51,140
Well, initialize it with an empty string, and then we could set up some event handlers and the value

33
00:01:51,140 --> 00:01:57,340
prop on that input will set up value as text and on change.

34
00:01:58,360 --> 00:02:01,720
As usual, we're going to put in a call back right there.

35
00:02:02,000 --> 00:02:05,710
We will receive the event object, which I'm going to abbreviate just as E!

36
00:02:07,090 --> 00:02:08,530
And then we will call it set text.

37
00:02:09,650 --> 00:02:11,750
With E. Argott value.

38
00:02:16,540 --> 00:02:17,320
Let's save this.

39
00:02:18,540 --> 00:02:21,330
And make sure that text input shows up and we can type inside of it.

40
00:02:21,790 --> 00:02:21,920
Yep.

41
00:02:23,310 --> 00:02:27,360
We should probably add in a little bit of styling on the thing just to kind of match the dropdown.

42
00:02:27,860 --> 00:02:32,000
So we're going to go back and add in a couple of elements around it just to provide some class names

43
00:02:32,000 --> 00:02:32,930
and stuff like that.

44
00:02:33,670 --> 00:02:40,250
So around that input, I'm going to put in first a div with the class name of UI form and I'll close

45
00:02:40,250 --> 00:02:41,930
off the div on the other side of the input.

46
00:02:43,660 --> 00:02:48,490
Then inside that, I'll put in a day with the class name of field and close off the div on the other

47
00:02:48,490 --> 00:02:49,210
side, the input.

48
00:02:50,310 --> 00:02:52,400
Then right above the inputs, I'll put in a label.

49
00:02:55,040 --> 00:02:58,130
With a text, enter text.

50
00:02:59,870 --> 00:03:03,570
And then on the input itself, I don't think we actually need anything else besides that.

51
00:03:03,630 --> 00:03:07,140
I think that's all the elements and additional class names we need.

52
00:03:07,410 --> 00:03:08,310
Let's save this now.

53
00:03:09,150 --> 00:03:10,200
Yeah, that looks all that better.

54
00:03:11,150 --> 00:03:12,740
Then we can enter some text right there.

55
00:03:13,110 --> 00:03:18,300
And in theory, as we do so, we're gonna take that text in the currently selected language translated

56
00:03:18,410 --> 00:03:19,880
and then show the output right below.

57
00:03:22,020 --> 00:03:25,470
Well, I think that we've got just about all the kind of preamble stuff that we need.

58
00:03:25,680 --> 00:03:31,590
Now, the last part we have to really start to go through is that convert component that is going to

59
00:03:31,590 --> 00:03:32,130
take in.

60
00:03:33,860 --> 00:03:38,540
The currently selected language and whatever the text, the user has entered and do the actual conversion

61
00:03:38,540 --> 00:03:39,140
process.

62
00:03:39,740 --> 00:03:41,990
So let's start to tackle that component in the next video.