react js google translate not working

Question

In React JS tried to implement google translate, and included translate component in my script file.

Googletranslate.js:

import React, { Component } from 'react';

class GoogleTranslate extends Component {
    googleTranslateElementInit () {
        //alert("test2")
        /* eslint-disable no-new */
        new window.google.translate.TranslateElement({pageLanguage: 'pt', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element')
     }

    componentDidMount() {
        // alert("test")

        var addScript = document.createElement('script');
        addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');        
        document.body.appendChild(addScript);  
        window.googleTranslateElementInit = this.googleTranslateElementInit;
    }

    render() {
        return (
            // <script type='text/javascript' src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' />
            <div id="google_translate_element"></div>
          );
     }
}

export default GoogleTranslate;

Adminlogin.js:

import GoogleTranslate from '../Applicant/GoogleTranslate'; 

I'm using this component included in Adminlogin.js file by using <GoogleTranslate />.

And included the component in my files, when I login to the site and after logout, when I navigate to homepage, there are two language bars.

Any help is appreciated.

Answer 1

Try this in fuctional component works fine

 const SamplePage = () => {

 const googleTranslateElementInit = () => {
   new window.google.translate.TranslateElement({ pageLanguage: 'en', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT }, 'google_translate_element')
  }
  
  useEffect(() => {
    var addScript = document.createElement('script');
    addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
    document.body.appendChild(addScript);
    window.googleTranslateElementInit = googleTranslateElementInit;
  }, [])

  return (
    <div>
      <h2 className="title gx-mb-4"><IntlMessages id="sidebar.samplePage"/></h2>
      <div id="google_translate_element"></div>
      <div className="gx-d-flex justify-content-center">
        <h4>Start building your app. Happy Coding!</h4>
      </div>

    </div>
  );
};

export default SamplePage

Answer 2

The duplication or multiplication of the language bars is as a result of document.body.appendChild(addScript) being called every time the page loads/renders.

To resolve this, add the plugin initialisation to your public > index.html file as follows:

<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script>
  <script type="text/javascript">
    function googleTranslateElementInit() {
      new google.translate.TranslateElement(
        {
          pageLanguage: "en",
          layout: window.google.translate.TranslateElement.InlineLayout.VERTICAL,
        }, 
        'google_translate_element'
      );
    }
  </script>

Then, change your GoogleTranslate component to

import React, { Component } from 'react';

class GoogleTranslate extends Component {
    render() {
        return (
            <div id="google_translate_element"></div>
          );
     }
}

export default GoogleTranslate;

If this works for you, kindly up vote. If it didn't, don't hesitate to drop a comment. Cheers!

Answer 3

Because in this.googleTranslateElementInit context can't find correct this.

You can in constructor bind function?

constructor(props) {
    super(props);
    this.googleTranslateElementInit = this.googleTranslateElementInit.bind(this);
}

or use arrow function bind in class

googleTranslateElementInit = () => {
   ...
}

Answer 4

saikrishna chowdhary solution worked for me