1 00:00:01,490 --> 00:00:05,060 We've now seen how we get out the translated text inside our response. 2 00:00:05,340 --> 00:00:10,490 So, as usual, we now need to take that response data, use it to update some piece of state, and 3 00:00:10,490 --> 00:00:13,400 then we'll make sure that we display that piece of state on the screen. 4 00:00:13,750 --> 00:00:15,860 And that's how we're going to get the translated text to appear. 5 00:00:16,700 --> 00:00:18,500 Let's go back over to our convert component. 6 00:00:19,040 --> 00:00:23,870 At the very top will create a new piece of state that is going to store the translated text, make a 7 00:00:23,870 --> 00:00:26,900 new piece of state called translated and set translated. 8 00:00:28,310 --> 00:00:30,940 We'll give that a default value of empty string. 9 00:00:32,870 --> 00:00:37,440 So now inside of our use effect function, we need to make sure that we get access to the response from 10 00:00:37,440 --> 00:00:38,070 that request. 11 00:00:38,580 --> 00:00:43,650 We're going to pull out the translated text and use it to update our translated piece of state. 12 00:00:44,680 --> 00:00:49,940 Remember that whenever we make a request inside of use effect, we cannot directly use the ace await 13 00:00:50,010 --> 00:00:50,610 syntax. 14 00:00:51,160 --> 00:00:56,050 Instead, we have to either wrap this request with another function or we can fall back to using the 15 00:00:56,110 --> 00:00:57,700 promised syntax instead. 16 00:00:58,390 --> 00:01:02,000 In this case, let's just make a little helper function and market as async. 17 00:01:02,900 --> 00:01:07,750 So inside of use effect, I'm going to make a helper function called do translation. 18 00:01:11,120 --> 00:01:12,980 We can mark that function as a sync. 19 00:01:14,200 --> 00:01:16,030 We can then take the entire request. 20 00:01:16,120 --> 00:01:17,950 So that's the Accio Scott Post statement. 21 00:01:18,640 --> 00:01:22,600 I'll go down to the bottom of that statement, make sure you've got just everything around Accio Scott 22 00:01:22,600 --> 00:01:23,020 post. 23 00:01:23,680 --> 00:01:24,430 We can cut it. 24 00:01:25,910 --> 00:01:28,070 And then move it into you do translation. 25 00:01:30,730 --> 00:01:32,950 We can then mark that request with a wait. 26 00:01:34,030 --> 00:01:36,490 And then get the response that comes back. 27 00:01:37,410 --> 00:01:40,690 Now, out of the response, all we really care about is that data property. 28 00:01:40,800 --> 00:01:43,400 Remember, the data property is what contains the information. 29 00:01:43,400 --> 00:01:45,290 Then we get back from the Google API. 30 00:01:45,810 --> 00:01:48,780 So let's just destructor out data like so. 31 00:01:50,200 --> 00:01:55,520 Then inside of data, we can access the data translations. 32 00:01:55,810 --> 00:01:57,000 The first Ellman's side there. 33 00:01:57,490 --> 00:01:58,540 Translated text. 34 00:01:59,460 --> 00:02:02,310 And that's going to be the information that we want to use to update our state. 35 00:02:03,700 --> 00:02:06,570 So right after the closing parentheses of the request itself. 36 00:02:06,690 --> 00:02:09,210 Make sure you are at the closing parentheses right there. 37 00:02:10,110 --> 00:02:11,180 Well, then call set. 38 00:02:11,250 --> 00:02:16,830 Translated and we'll pull our information or the translated text out of that data object. 39 00:02:17,520 --> 00:02:19,170 Now, this is gonna be a little bit confusing. 40 00:02:19,170 --> 00:02:24,750 Remember that when we get the response back from Axios, all the information inside that response is 41 00:02:24,750 --> 00:02:26,250 available on the data property. 42 00:02:26,310 --> 00:02:27,600 So that's data right there. 43 00:02:27,600 --> 00:02:29,010 We just d structure that out. 44 00:02:29,640 --> 00:02:34,680 But further inside that response, inside of the information that we actually get back from the Google 45 00:02:34,680 --> 00:02:37,560 API, there is also a data property. 46 00:02:38,010 --> 00:02:39,510 So there are two data properties. 47 00:02:39,510 --> 00:02:44,940 One is talking about the information we got back from Axios or through Axios, I should say, and that 48 00:02:44,940 --> 00:02:45,540 response. 49 00:02:46,230 --> 00:02:49,590 And inside of that response, there is also a data property. 50 00:02:50,900 --> 00:02:54,050 So in total, at set transit translated right here. 51 00:02:54,110 --> 00:02:56,360 We're going to say data dot data. 52 00:02:56,690 --> 00:02:59,750 The first one is the information inside of the Axios response. 53 00:03:00,020 --> 00:03:02,090 The second one is the actual response data. 54 00:03:03,170 --> 00:03:04,440 Dot translation's. 55 00:03:04,810 --> 00:03:10,210 We want to take the first translation result out of there and get the translated text property. 56 00:03:11,480 --> 00:03:12,140 And that should be at. 57 00:03:14,450 --> 00:03:19,690 Now, last we have to do is just make sure that after defining this entire do translation function, 58 00:03:20,020 --> 00:03:22,110 we actually call it inside of use effect. 59 00:03:24,520 --> 00:03:30,040 Though inside of the very bottom of our U.S. fact function, we will call do translation. 60 00:03:31,080 --> 00:03:36,720 That function is going to be invoked anytime we first mount our component, any time we change language 61 00:03:36,810 --> 00:03:38,430 and anytime we change text. 62 00:03:39,860 --> 00:03:45,810 Then finally, rather than just returning an empty d'Hiv, let's show the translated result Dongo into. 63 00:03:47,120 --> 00:03:52,310 Expand that return statement, I'll put in a div, I'll put in an H one. 64 00:03:54,710 --> 00:03:58,150 With the class name of I think it's UI header off the top of my head. 65 00:04:00,510 --> 00:04:03,870 And inside there will show our trans lated results. 66 00:04:05,410 --> 00:04:06,910 OK, let's try this out. 67 00:04:06,940 --> 00:04:08,540 Now, we just made a lot of changes. 68 00:04:08,980 --> 00:04:12,910 I would encourage you to double check your code just very quickly, make sure you're declaring that 69 00:04:12,910 --> 00:04:13,660 piece of states. 70 00:04:13,930 --> 00:04:17,770 Make sure you've got the use effect and you call or you defined do translation side there. 71 00:04:19,610 --> 00:04:23,250 At the bottom of do translation, make sure you update your translated piece of states. 72 00:04:23,390 --> 00:04:27,510 And then at the bottom of use effect, make sure you call do translation itself. 73 00:04:28,640 --> 00:04:28,910 All right. 74 00:04:29,000 --> 00:04:30,950 Let's look back over and do a quick test. 75 00:04:33,960 --> 00:04:38,330 So I shall be able to type in something like hi there and see the results appear. 76 00:04:38,960 --> 00:04:39,410 Awesome. 77 00:04:39,950 --> 00:04:45,110 We should also Bill to change the language and immediately see the result appears or change as well. 78 00:04:45,200 --> 00:04:47,000 So got a Hindi, but a Dutch? 79 00:04:47,810 --> 00:04:49,250 Well, I'd say this looks pretty good. 80 00:04:50,300 --> 00:04:52,430 So we've got our translation app working. 81 00:04:52,670 --> 00:04:57,080 But now if you'll look at your network request log over here, you might see something a little bit 82 00:04:57,080 --> 00:04:57,650 familiar. 83 00:04:58,130 --> 00:05:03,140 We are now making a request to the Google API every single time we make a key address. 84 00:05:03,650 --> 00:05:10,040 In this case, the Google Translate API is a paid API, so we technically pay for every request we make. 85 00:05:10,070 --> 00:05:13,610 Now, in this case, I am paying for the request because you are probably using my API key. 86 00:05:14,150 --> 00:05:15,740 This API is very cheap to use. 87 00:05:15,800 --> 00:05:17,420 It's really not expensive at all. 88 00:05:17,870 --> 00:05:19,910 Nonetheless, money is being paid. 89 00:05:20,300 --> 00:05:23,600 So we should probably make sure that we limit the number of requests that we make. 90 00:05:24,380 --> 00:05:29,180 Let's take a look at reducing the number of requests using the same technique that we took a look at 91 00:05:29,270 --> 00:05:30,350 a little bit ago.