1
00:00:00,760 --> 00:00:05,410
In this video we're going to put together the language selector at the top of our app component in order

2
00:00:05,410 --> 00:00:07,780
to record what the currently selected language is.

3
00:00:07,810 --> 00:00:10,350
We are going to be making use of component level state.

4
00:00:10,510 --> 00:00:15,050
So no redux no store nothing like that just normal component level state.

5
00:00:15,460 --> 00:00:22,630
I will open up my apt js file and at the top of my app component I'm going to initialize my state object

6
00:00:24,010 --> 00:00:30,940
I'm going to give this a language property and by default I will set it to English like so then underneath

7
00:00:30,940 --> 00:00:37,650
that I'm going to find my div I'm going to remove the text inside there and then turn this into a multi-line

8
00:00:37,710 --> 00:00:39,570
GSX expression like so

9
00:00:44,090 --> 00:00:51,950
and then inside of there I'll place a new div or give it the text select a language and then after that

10
00:00:51,980 --> 00:00:55,720
I'm going to place two icon components or two icon tags.

11
00:00:55,820 --> 00:01:00,420
So I'll say I class name flag us.

12
00:01:00,830 --> 00:01:03,640
So that's what's going to get a flag to appear on the screen.

13
00:01:03,890 --> 00:01:10,440
And then right after that I'll put another flag that has a class name of flag and l like so

14
00:01:13,950 --> 00:01:15,940
we can now save this and we flip back over.

15
00:01:15,960 --> 00:01:18,460
We should see the two flags appear on the screen.

16
00:01:18,460 --> 00:01:19,360
Cool.

17
00:01:19,440 --> 00:01:24,300
So now the next thing we need to do is add on some Click event handlers to both these tags right here

18
00:01:24,570 --> 00:01:28,890
and make sure that any time that a user selects either one we call some callback function that's going

19
00:01:28,890 --> 00:01:31,920
to update our currently selected language.

20
00:01:31,920 --> 00:01:38,490
So inside of the first flag I'll add on an on click Propp any time that someone clicks this I'm going

21
00:01:38,490 --> 00:01:45,540
to call a callback method called this dot on language change and I will invoke that with the string

22
00:01:45,840 --> 00:01:52,970
English like so I'm going to zoom out for just a second so you can see that entire line and then I'll

23
00:01:52,970 --> 00:01:55,960
do just about the same thing on the second flag as well.

24
00:01:57,600 --> 00:02:05,120
So I would call on language change but then this time I'm going to say Dutch as my language.

25
00:02:05,150 --> 00:02:05,610
Instead

26
00:02:09,190 --> 00:02:14,410
So now we will define our Lola callback method on language change and make sure that we take the appropriate

27
00:02:14,410 --> 00:02:18,110
argument and update our language because of state.

28
00:02:18,250 --> 00:02:20,220
Now above our render method.

29
00:02:20,260 --> 00:02:23,590
I will add on language change.

30
00:02:23,590 --> 00:02:27,760
I'm going to make sure that I defined this as an arrow function because it is a callback method that

31
00:02:27,760 --> 00:02:31,540
we are passing off to something else inside of our application.

32
00:02:31,540 --> 00:02:37,210
It's going to be called with a new language that the user is selecting.

33
00:02:37,210 --> 00:02:40,630
And so I'm going to take that new value and update my state with it.

34
00:02:40,630 --> 00:02:45,070
So I will say set States language is language like so.

35
00:02:45,070 --> 00:02:50,650
And of course we can abbreviate this simply as language because the key and the value are the same.

36
00:02:50,680 --> 00:02:55,780
Now finally to test this out I'm going to put down at the bottom of my render method but inside that

37
00:02:55,780 --> 00:03:01,420
bottom div right there I'll simply say this dot state DOT language just to make sure we can toggle between

38
00:03:01,420 --> 00:03:02,520
the different languages.

39
00:03:03,410 --> 00:03:07,060
It's not going to save this I will flock flip back over to my browser.

40
00:03:07,190 --> 00:03:11,660
By default I should see English and if I click on the other flag I should see Dutch instead.

41
00:03:11,750 --> 00:03:13,760
And I should build to toggle between the two.

42
00:03:14,130 --> 00:03:15,410
OK so that looks good.

43
00:03:15,410 --> 00:03:17,570
Now we've got the language selector put together.

44
00:03:17,570 --> 00:03:18,820
Let's take another quick pause.

45
00:03:18,860 --> 00:03:25,730
When we come back the next video we'll put together the where is it user create form that's going to

46
00:03:25,730 --> 00:03:28,760
contain our field and Button components.