1
00:00:01,670 --> 00:00:03,830
We are all done working on our drop down component.

2
00:00:03,920 --> 00:00:07,550
Now, you'll notice that in the original mockup I showed you're going to display some different colors

3
00:00:07,580 --> 00:00:11,450
and then change the color of some text on the screen if you want to make that update on your own.

4
00:00:11,570 --> 00:00:12,530
Feel free to do so.

5
00:00:12,800 --> 00:00:16,040
Otherwise, birds can move on to the next component, because I'm sure you could probably figure out

6
00:00:16,070 --> 00:00:16,880
how to do this on your own.

7
00:00:17,730 --> 00:00:17,940
OK.

8
00:00:18,020 --> 00:00:20,210
So here's our last little widget we we're gonna put together.

9
00:00:20,640 --> 00:00:25,040
But this is gonna be very similar to the language translation app that we put together in the second

10
00:00:25,040 --> 00:00:26,360
video of this course.

11
00:00:27,100 --> 00:00:29,780
A user is going to enter in some text right here into a text input.

12
00:00:30,260 --> 00:00:32,450
They will then select a language from a dropdown.

13
00:00:32,930 --> 00:00:37,040
We'll then translate the language and show the result down here at the bottom of the screen.

14
00:00:37,730 --> 00:00:41,750
As you could probably guess, we are going to reuse our dropdown component right here.

15
00:00:41,840 --> 00:00:45,290
The one that we just built rather than displaying some different colors.

16
00:00:45,380 --> 00:00:48,080
We will show a list of languages that the user can select.

17
00:00:49,340 --> 00:00:49,610
All right.

18
00:00:49,640 --> 00:00:53,600
Now, this component or this widget is going to be a little bit more complicated than some of the other

19
00:00:53,600 --> 00:00:54,500
ones we have put together.

20
00:00:54,800 --> 00:00:57,560
So let's get a better idea of some overall architecture.

21
00:00:59,080 --> 00:01:03,280
OK, so to organize this little widget, we are going to create a couple of different components.

22
00:01:03,820 --> 00:01:08,140
We are not going to put too much code around us inside of our app component because it would just mess

23
00:01:08,140 --> 00:01:10,330
it up or kind of muddy it up a good bit.

24
00:01:10,990 --> 00:01:16,570
Instead, we are going to create a new translate component to translate component is gonna be responsible

25
00:01:16,570 --> 00:01:19,030
for showing all of this content on the screen.

26
00:01:20,050 --> 00:01:24,620
The translate component itself is going to show an instance of the drop down component to allow a user

27
00:01:24,620 --> 00:01:25,580
to select a language.

28
00:01:26,090 --> 00:01:28,760
And it will also show a convert component.

29
00:01:29,280 --> 00:01:34,820
That convert component is going to be responsible for taking in some text and some currently selected

30
00:01:34,820 --> 00:01:40,250
language and doing the actual language translation and showing that content right there.

31
00:01:40,910 --> 00:01:45,200
You can really think of the convert component as just being responsible for that right there.

32
00:01:46,120 --> 00:01:48,760
We're not going worry about the convert component too much just yet.

33
00:01:49,000 --> 00:01:53,890
Instead, we're gonna first focus on just translate and the dropdown, making sure that we can show

34
00:01:53,890 --> 00:01:59,280
a list of language options and set a currently selected language and store that inside the translate

35
00:01:59,290 --> 00:01:59,830
component.

36
00:02:01,600 --> 00:02:04,660
So, again, right now, we're just not going worry about convert to much.

37
00:02:05,800 --> 00:02:06,050
OK.

38
00:02:06,100 --> 00:02:08,890
So options, first off, what is this going to look like?

39
00:02:09,130 --> 00:02:12,700
Well, as you can guess, this is gonna be the selected or the list of different languages.

40
00:02:12,940 --> 00:02:14,080
A user can select.

41
00:02:15,490 --> 00:02:18,130
Options is going to be, once again an array of objects.

42
00:02:18,430 --> 00:02:20,920
Each object will have a label and a value.

43
00:02:21,580 --> 00:02:25,660
The label is going to be the actual language itself or the name of the language.

44
00:02:26,140 --> 00:02:31,180
So right now, we're just going to worry about putting in languages of Africans, Arabic and Hindi.

45
00:02:32,210 --> 00:02:34,910
Then the value for each of these is gonna be a language code.

46
00:02:35,630 --> 00:02:39,650
So the value will be a F for Africans, a R for Arabic and Ajai for Hindi.

47
00:02:40,340 --> 00:02:44,960
The value or the language code in each of these has a lot of meaning attached to it.

48
00:02:45,060 --> 00:02:50,030
So I want to tell you right now that you have to use a value of A.F. Aiyah and Ajai.

49
00:02:50,450 --> 00:02:51,440
I'll show you why that is.

50
00:02:51,470 --> 00:02:56,420
And just a little bit as we start to move towards actually converting the language into the target language

51
00:02:56,690 --> 00:02:59,760
or the excuse me, the supplied text into the target language.

52
00:03:00,260 --> 00:03:04,580
Right now, please just make sure that you eventually put in the exact same values as I do.

53
00:03:06,170 --> 00:03:07,070
That's give me options.

54
00:03:07,340 --> 00:03:11,990
We're going to pass options down as a prop into the drop down component so user can select one.

55
00:03:12,710 --> 00:03:19,190
Along with that, we will also pass down the currently selected language and asset language callback.

56
00:03:19,870 --> 00:03:25,640
So whenever the user changes the currently selected language, we will call select set language that

57
00:03:25,640 --> 00:03:27,980
will update our piece of state inside the translate component.

58
00:03:28,400 --> 00:03:33,800
Essentially, this entire state and prop system under percent identical to what we currently have.

59
00:03:34,280 --> 00:03:40,220
Back in our code editor in the app J.S. File, where we've got dropdown with some currently selected

60
00:03:40,220 --> 00:03:45,500
item, some drop, some callback to change the currently selected item and the set of options a user

61
00:03:45,500 --> 00:03:47,720
can pick from completely identical.

62
00:03:47,990 --> 00:03:51,200
All we're doing is changing what the options are.

63
00:03:52,560 --> 00:03:52,770
OK.

64
00:03:52,890 --> 00:03:54,250
Let's just start with that right now.

65
00:03:54,540 --> 00:03:58,680
And then after we get that little part put together, we'll then start to worry about that other convert

66
00:03:58,680 --> 00:03:59,280
component.

67
00:04:00,090 --> 00:04:03,870
So quick pause and we'll start to put together this translate stuff in the next video.