Making site multi language support using google translate for React js

Question

For simple html projects i can simple refer this link.

https://www.w3schools.com/howto/howto_google_translate.asp

But I'm trying to implement in react app . So I'm not able to replicate the code in react app.

componentDidMount() {
  googleTranslateElementInit(() => {
    new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
    });
    const script = document.createElement("script");
    script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
    script.async = true;
    document.body.appendChild(script);
}

And return render element .

  render() {
    return (
      <div id="google_translate_element"></div>
    );
  }

This is showing me error saying google , googleTranslateElementInit is not defined.

How can I use google translator in react app ? Also is there any npm packages which can translate whole site ?

Thanks

Answer 1

Move your google translate script to the root index.html of your project.

However, you should leave the below code at your desired location:

render() {
    return (
      <div id="google_translate_element"></div>
    );
  }

Fixes the problem easily.