1
00:00:01,180 --> 00:00:05,440
Make sure you've got that API key copy and pasted into your translate dodgy as file.

2
00:00:06,130 --> 00:00:10,570
Once you've got that in there, we're then going to find our components directory and make our new convert

3
00:00:10,650 --> 00:00:11,740
dot JSC component.

4
00:00:12,160 --> 00:00:13,300
We'll make a new file inside there.

5
00:00:13,740 --> 00:00:14,860
Invert Dot J.S..

6
00:00:16,050 --> 00:00:19,380
Inside that new file will then add in a couple of imports right away.

7
00:00:19,950 --> 00:00:20,790
Let's get react.

8
00:00:21,450 --> 00:00:21,940
We'll get you.

9
00:00:21,940 --> 00:00:24,540
States probably need to use effect as well.

10
00:00:25,590 --> 00:00:26,830
And I think that should be it for now.

11
00:00:27,850 --> 00:00:29,630
Well, then Crete, our convert component.

12
00:00:32,440 --> 00:00:34,750
Right now, just return an empty d'Hiv.

13
00:00:37,500 --> 00:00:38,980
In export it at the bottom.

14
00:00:41,390 --> 00:00:41,630
All right.

15
00:00:42,080 --> 00:00:46,850
We know without a doubt that we want our convert component to receive two different crops and needs

16
00:00:46,850 --> 00:00:49,760
to receive the language Propp and the text Propp.

17
00:00:51,160 --> 00:00:52,450
Let's make sure we add those in.

18
00:00:52,930 --> 00:00:55,180
We'll get language and text.

19
00:00:56,290 --> 00:01:02,380
Next, we know that we need to make a request whenever the value of language or text changes in any

20
00:01:02,380 --> 00:01:02,710
way.

21
00:01:03,370 --> 00:01:09,070
So we received some new text as a prop or language as a new prop, we need to run some additional code.

22
00:01:09,960 --> 00:01:13,770
The ideal way of wiring that up is to put together a use effect hook.

23
00:01:14,650 --> 00:01:19,730
We're then going to add in language and text to that dependency or ray or in other words.

24
00:01:19,750 --> 00:01:21,310
That second argument array.

25
00:01:22,230 --> 00:01:25,420
So above our return statement, blad in a call to use effect.

26
00:01:27,700 --> 00:01:33,940
We'll add in the array as the second argument, and inside there we will list language and text.

27
00:01:34,870 --> 00:01:39,790
Now, any time we get a new language or a new piece of text, we will run that function.

28
00:01:41,560 --> 00:01:46,180
Right now, let's just put in a council log and say new language or text.

29
00:01:48,810 --> 00:01:49,820
Yes, let's save this.

30
00:01:51,040 --> 00:01:55,630
Let's wired up to our translate jarheads file and make sure that if we ever change the language inside

31
00:01:55,630 --> 00:01:59,460
of our language dropdown or type in some new text, we see that console log appear.

32
00:02:00,420 --> 00:02:05,300
Back inside of our Translate JSF file at the top, I'm going to import that new convert component.

33
00:02:06,430 --> 00:02:07,160
From convert.

34
00:02:12,280 --> 00:02:17,260
Then right after the drop down at the very bottom, let's put in about maybe an H.R. down here just

35
00:02:17,260 --> 00:02:18,790
to provide a little bit of separation.

36
00:02:21,570 --> 00:02:28,410
After that, I'll put in an H three that says output, and I'm going to give it a class name of UI heter.

37
00:02:29,890 --> 00:02:33,070
And then after that, I'll put in my translate component.

38
00:02:34,020 --> 00:02:35,510
Which may not translate, but convert.

39
00:02:37,020 --> 00:02:42,030
So to convert, we have to provide the currently selected language and whatever tax the user has currently

40
00:02:42,030 --> 00:02:42,390
entered.

41
00:02:42,960 --> 00:02:48,090
So those are going to be the language and text pieces of state that we need to communicate as props

42
00:02:48,120 --> 00:02:49,170
down into converts.

43
00:02:50,280 --> 00:02:54,220
We'll pass down text and we'll pass down language.

44
00:02:59,060 --> 00:03:02,060
OK, so let's say this, look back over and see how we're doing.

45
00:03:04,470 --> 00:03:06,280
So I've got my text inputs.

46
00:03:06,360 --> 00:03:07,200
I've got language.

47
00:03:07,230 --> 00:03:10,350
I got the H.R. I see output now right away.

48
00:03:10,410 --> 00:03:13,020
I see the console log of new language or text up here.

49
00:03:13,020 --> 00:03:13,500
Right there.

50
00:03:13,940 --> 00:03:14,150
OK.

51
00:03:14,250 --> 00:03:16,110
That means we're definitely running that use effect took.

52
00:03:16,660 --> 00:03:20,400
And now whenever we type something in, we see an additional console log.

53
00:03:21,050 --> 00:03:25,220
And whenever we change the language, we see an additional console log as well.

54
00:03:26,190 --> 00:03:26,970
So that looks pretty good.

55
00:03:27,000 --> 00:03:32,070
We've now got everything we need to make sure that we can make another request to our API and update

56
00:03:32,250 --> 00:03:34,050
our translated language right there.

57
00:03:35,310 --> 00:03:36,120
Let's take a pause here.

58
00:03:36,260 --> 00:03:36,570
Come back.

59
00:03:36,600 --> 00:03:41,340
Next video, we will setup our actual request to be made inside of our convert component.