Make sure you've got that API key copy and pasted into your translate dodgy as file.
Once you've got that in there, we're then going to find our components directory and make our new convert
dot JSC component.
We'll make a new file inside there.
Invert Dot J.S..
Inside that new file will then add in a couple of imports right away.
Let's get react.
We'll get you.
States probably need to use effect as well.
And I think that should be it for now.
Well, then Crete, our convert component.
Right now, just return an empty d'Hiv.
In export it at the bottom.
All right.
We know without a doubt that we want our convert component to receive two different crops and needs
to receive the language Propp and the text Propp.
Let's make sure we add those in.
We'll get language and text.
Next, we know that we need to make a request whenever the value of language or text changes in any
way.
So we received some new text as a prop or language as a new prop, we need to run some additional code.
The ideal way of wiring that up is to put together a use effect hook.
We're then going to add in language and text to that dependency or ray or in other words.
That second argument array.
So above our return statement, blad in a call to use effect.
We'll add in the array as the second argument, and inside there we will list language and text.
Now, any time we get a new language or a new piece of text, we will run that function.
Right now, let's just put in a council log and say new language or text.
Yes, let's save this.
Let's wired up to our translate jarheads file and make sure that if we ever change the language inside
of our language dropdown or type in some new text, we see that console log appear.
Back inside of our Translate JSF file at the top, I'm going to import that new convert component.
From convert.
Then right after the drop down at the very bottom, let's put in about maybe an H.R. down here just
to provide a little bit of separation.
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.
And then after that, I'll put in my translate component.
Which may not translate, but convert.
So to convert, we have to provide the currently selected language and whatever tax the user has currently
entered.
So those are going to be the language and text pieces of state that we need to communicate as props
down into converts.
We'll pass down text and we'll pass down language.
OK, so let's say this, look back over and see how we're doing.
So I've got my text inputs.
I've got language.
I got the H.R. I see output now right away.
I see the console log of new language or text up here.
Right there.
OK.
That means we're definitely running that use effect took.
And now whenever we type something in, we see an additional console log.
And whenever we change the language, we see an additional console log as well.
So that looks pretty good.
We've now got everything we need to make sure that we can make another request to our API and update
our translated language right there.
Let's take a pause here.
Come back.
Next video, we will setup our actual request to be made inside of our convert component.