I am trying to translate my application using react-i18next. I know how to use it with simple const components, but not within a class.

I'm working with the I18nextProvider. This is my App.js file.

import React, { Component } from 'react';

import { Provider } from 'react-redux';

import { BrowserRouter } from 'react-router-dom';

import { I18nextProvider } from 'react-i18next';

import i18next from 'i18next';

// eslint-disable-next-line import/no-extraneous-dependencies

import { hot } from 'react-hot-loader';

import 'bootstrap/dist/css/bootstrap.css';

import '../../scss/app.scss';

import Router from './Router';

import store from './store';

import ScrollToTop from './ScrollToTop';

import { config as i18nextConfig } from '../../translations';



i18next.init(i18nextConfig);



class App extends Component {

  constructor() {

    super();

    this.state = {

      loading: true,

      loaded: false,

    };

  }



  componentDidMount() {

    window.addEventListener('load', () => {

      this.setState({ loading: false });

      setTimeout(() => this.setState({ loaded: true }), 500);

    });

  }



  render() {

    const { loaded, loading } = this.state;

    return (

      <Provider store={store}>

        <BrowserRouter basename=/easydev>

          <I18nextProvider i18n={i18next}>

            <ScrollToTop>

              {!loaded &&

                <div className={`load${loading ? '' : ' loaded'}`}>

                  <div className=load__icon-wrap>

                    <svg className=load__icon>

                      <path fill=#4ce1b6 d=M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z />

                    </svg>

                  </div>

                </div>

              }

              <div>

                <Router />

              </div>

            </ScrollToTop>

          </I18nextProvider>

        </BrowserRouter>

      </Provider>

    );

  }

}



export default hot(module)(App);

Now using it within a const based component is quite easy. Here is an example:

import React from 'react';

import { Card, CardBody, Col } from 'reactstrap';

import HeartOutlineIcon from 'mdi-react/HeartOutlineIcon';

import { translate } from 'react-i18next';

import PropTypes from 'prop-types';



const InfoCard = ({ t }) => (

  <Col md={12} xl={3} lg={6} sm={12} xs={12}>

    <Card>

      <CardBody className=dashboard__health-chart-card>

        <div className=card__title>

          <h5 className=bold-text>{t('dashboard_fitness.heartrate')}</h5>

        </div>

        <div className=dashboard__health-chart>

          <div className=dashboard__health-chart-info>

            <HeartOutlineIcon style={{ fill: '#ff4861' }} />

            <p className=dashboard__health-chart-number>96</p>

            <p className=dashboard__health-chart-units>b/min</p>

          </div>

        </div>

      </CardBody>

    </Card>

  </Col>

);



InfoCard.propTypes = {

  t: PropTypes.func.isRequired,

};



export default translate('common')(InfoCard);

As you can see I just import the translate from the react-i18next and I'm almost ready to go with the t function.

How can I achieve the same within a class component? I want to implement it in this class:

/* eslint-disable react/no-typos */

import React, { PureComponent } from 'react';

import { DropdownItem, DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';

import { translate } from 'react-i18next';



import MenuDownIcon from 'mdi-react/ChevronDownIcon';

import MagnifyIcon from 'mdi-react/MagnifyIcon';



class TradesTableControls extends PureComponent {

  constructor() {

    super();

    this.state = {

      rows: 10,

    };

  }



  changeRowAmount = (rows) => {

    switch (rows) {

      case 10:

        this.setState({ rows: 10 });

        break;

      case 25:

        this.setState({ rows: 25 });

        break;

      case 50:

        this.setState({ rows: 50 });

        break;

      case 100:

        this.setState({ rows: 100 });

        break;

      default:

        this.setState({ rows: 10 });

        break;

    }

  };



  render() {

    return (

      <div className=trades-table__controls-wrap>

        <div className=trades-table__controls>

          <UncontrolledDropdown>

            <DropdownToggle className=icon icon--right outline size=sm>

              <p>

                {t('history.controls.show')}

                {this.state.rows}

                {t('history.controls.results')}

                <MenuDownIcon />

              </p>

            </DropdownToggle>

            <DropdownMenu className=dropdown__menu>

              <DropdownItem onClick={() => this.changeRowAmount(10)}>10</DropdownItem>

              <DropdownItem onClick={() => this.changeRowAmount(25)}>25</DropdownItem>

              <DropdownItem onClick={() => this.changeRowAmount(50)}>50</DropdownItem>

              <DropdownItem onClick={() => this.changeRowAmount(100)}>100</DropdownItem>

            </DropdownMenu>

          </UncontrolledDropdown>

        </div>

        <div className=trades-table__controls-right>

          <div className=trades-table__control-search>

            <input placeholder=Search />

            <div className=trades-table__control-search-icon><MagnifyIcon /></div>

          </div>

        </div>

      </div>

    );

  }

}



export default translate('common')(TradesTableControls);

I'm quite new to React and ES6, but I was unable to find the solution online. Would really appreciate any help!

Thanks!