We've now seen how we get out the translated text inside our response.
So, as usual, we now need to take that response data, use it to update some piece of state, and
then we'll make sure that we display that piece of state on the screen.
And that's how we're going to get the translated text to appear.
Let's go back over to our convert component.
At the very top will create a new piece of state that is going to store the translated text, make a
new piece of state called translated and set translated.
We'll give that a default value of empty string.
So now inside of our use effect function, we need to make sure that we get access to the response from
that request.
We're going to pull out the translated text and use it to update our translated piece of state.
Remember that whenever we make a request inside of use effect, we cannot directly use the ace await
syntax.
Instead, we have to either wrap this request with another function or we can fall back to using the
promised syntax instead.
In this case, let's just make a little helper function and market as async.
So inside of use effect, I'm going to make a helper function called do translation.
We can mark that function as a sync.
We can then take the entire request.
So that's the Accio Scott Post statement.
I'll go down to the bottom of that statement, make sure you've got just everything around Accio Scott
post.
We can cut it.
And then move it into you do translation.
We can then mark that request with a wait.
And then get the response that comes back.
Now, out of the response, all we really care about is that data property.
Remember, the data property is what contains the information.
Then we get back from the Google API.
So let's just destructor out data like so.
Then inside of data, we can access the data translations.
The first Ellman's side there.
Translated text.
And that's going to be the information that we want to use to update our state.
So right after the closing parentheses of the request itself.
Make sure you are at the closing parentheses right there.
Well, then call set.
Translated and we'll pull our information or the translated text out of that data object.
Now, this is gonna be a little bit confusing.
Remember that when we get the response back from Axios, all the information inside that response is
available on the data property.
So that's data right there.
We just d structure that out.
But further inside that response, inside of the information that we actually get back from the Google
API, there is also a data property.
So there are two data properties.
One is talking about the information we got back from Axios or through Axios, I should say, and that
response.
And inside of that response, there is also a data property.
So in total, at set transit translated right here.
We're going to say data dot data.
The first one is the information inside of the Axios response.
The second one is the actual response data.
Dot translation's.
We want to take the first translation result out of there and get the translated text property.
And that should be at.
Now, last we have to do is just make sure that after defining this entire do translation function,
we actually call it inside of use effect.
Though inside of the very bottom of our U.S. fact function, we will call do translation.
That function is going to be invoked anytime we first mount our component, any time we change language
and anytime we change text.
Then finally, rather than just returning an empty d'Hiv, let's show the translated result Dongo into.
Expand that return statement, I'll put in a div, I'll put in an H one.
With the class name of I think it's UI header off the top of my head.
And inside there will show our trans lated results.
OK, let's try this out.
Now, we just made a lot of changes.
I would encourage you to double check your code just very quickly, make sure you're declaring that
piece of states.
Make sure you've got the use effect and you call or you defined do translation side there.
At the bottom of do translation, make sure you update your translated piece of states.
And then at the bottom of use effect, make sure you call do translation itself.
All right.
Let's look back over and do a quick test.
So I shall be able to type in something like hi there and see the results appear.
Awesome.
We should also Bill to change the language and immediately see the result appears or change as well.
So got a Hindi, but a Dutch?
Well, I'd say this looks pretty good.
So we've got our translation app working.
But now if you'll look at your network request log over here, you might see something a little bit
familiar.
We are now making a request to the Google API every single time we make a key address.
In this case, the Google Translate API is a paid API, so we technically pay for every request we make.
Now, in this case, I am paying for the request because you are probably using my API key.
This API is very cheap to use.
It's really not expensive at all.
Nonetheless, money is being paid.
So we should probably make sure that we limit the number of requests that we make.
Let's take a look at reducing the number of requests using the same technique that we took a look at
a little bit ago.