Problems with react to translate words using google translate api - reactjs

Question

I am trying to create a translation page where you type the word and it should translate to the language you chose in the dropdown. Using React and axios and the API from Rapid API.
I keep getting error like 401, 429 I know what the errors are but don't know how to fix it. Could it be from the website [Rapid API][1] that gives me a bad API?
import axios from "axios"
// de-structure language and text props
const Convert = ({ language, text }) => {
const [results, setResults] = useState("")
useEffect(() => {
const translate = async () => {
const translation = await axios.post(
"https://google-translate1.p.rapidapi.com/language/translate/v2",
{},
{
params: {
q: text,
target: language.value,
key: "cd4662825bmshfb23e36cc668d7fp111f42jsn736f6cc3a9aa",
},
}
)
setResults(translation.data.data.translations[0].translatedText)
}
translate()
}, [language, text])
console.log(results);
return (
<div>
<p>{results}</p>
</div>
)
}
export default Convert ```
[1]: https://rapidapi.com/googlecloud/api/google-translate1?endpoint=apiendpoint_a5764907-04b6-4d61-869b-79dc5325c739

Answer 1

I think there are 2 different APIs here... You are talking about the RapidAPI API but in the code you are using the MyMemory API.
So, regarding to your code and the MyMemory API specification, I see a couple errors in your code:
You are calling the /status endpoint, which checks the status of a TM import. I think this is not the endpoint you want to call. Instead, you have to make the request to the /get endpoint: https://api.mymemory.translated.net/get.
Also the request should be a get, not a post (just replace axios.post with axios.get).
The "q" and "key" params are correct, BUT in the documentation it says that you have to send a "langpair" param, not a "target".
With those changes the code should go fine. I've tried it and it works.

Answer 2

Try the next code:
import React, { useState, useEffect } from "react"
import axios from "axios"
import qs from "qs"
// de-structure language and text props
const Convert = ({ language, text }) => {
const [results, setResults] = useState("")
useEffect(() => {
const translate = async () => {
const translation = await axios.post(
"https://google-translate1.p.rapidapi.com/language/translate/v2",
qs.stringify({
q: text,
target: language.value
}),
{
headers: {
'x-rapidapi-key': 'cd4662825bmshfb23e36cc668d7fp111f42jsn736f6cc3a9aa',
'x-rapidapi-host': 'google-translate1.p.rapidapi.com'
}
}
)
setResults(translation.data.data.translations[0].translatedText)
}
translate()
}, [])
console.log(results);
return (
<div>
<p>{results}</p>
</div>
)
}
export default Convert
If you get a 403 Forbidden error then it's possibly because you're not subscribed to the API. To fix this, just go to https://rapidapi.com/googlecloud/api/google-translate1 and click on the "Subscribe to Test" button. Then select the free plan and you will be ready to go.

Answer 3

Here are some points that can definitely solve this issue.
If you're using RapidAPI then x-rapidapi-key is your API key. So instead of mentioning key in params, you can pass x-rapidapi-key inside the headers.
The possible reason for the 403 code is that you're not subscribed to that particular API. Make sure to double-check that.
429 status code indicates so many request in the give amount of time. I have checked, the rate limit is 5 request per second for Google Translate API.
You can use the code snippet that RapidAPI provides in order to avoid any kind of unwanted errors.