0

I'm sorry because I am noob in react, I want to translate my website I followed the tutorial on i18n but I did not find a solution to my problem because I have a class and I want to declare the constant to associate useTranslation , here is my code thank you very much.

import React, { Component } from 'react';
import { inject, observer } from "mobx-react";

import Timer from '../../components/common/Timer';
import FrenchLanguage from '../../images/france-48.png';
import EnglishLanguage from '../../images/england-48.png';
import { useTranslation } from 'react-i18next';

import './brothers.scss';

const { t, i18n } = useTranslation();

class brothers extends Component {

constructor(props) {
    super(props);
    this.stores = this.props.Stores;
  }

updateResponsive = () => {
    this.forceUpdate()
  }

changeLanguage = (Language) => {
   i18n.changeLanguage(Language)
  }

showAlert = () =>{
    alert("I'm an alert : ");
  }

render() {

    return (
      <div className={"full-screen main-grid"}>

        <Timer
          task={this.updateResponsive}
          interval={1000}
        />

        <div className="title-containers">

          <div className="language">
            <img onClick={() => this.changeLanguage('fr')}  src={FrenchLanguage} alt="logo"/>
            <img onClick={() => this.changeLanguage('en')}  src={EnglishLanguage} alt="logo"/>
          </div>
        </div>
</div>
    );
  }
}

export default inject("Stores")(observer(brothers));

Thank you

Ibrahim
  • 1
  • 1
  • Don't use classes if you can. You fight the framework by trying to glue old and new approach together. – Estus Flask Oct 14 '21 at 22:27
  • Thank you for replay, i can change the class to function ? because i have mobx for stores – Ibrahim Oct 14 '21 at 22:59
  • Function components are there for a long time. Of course, they are supported for Mobx, https://mobx.js.org/react-integration.html#using-local-observable-state-in-observer-components – Estus Flask Oct 15 '21 at 07:15

0 Answers0