title: Using react-i18next within a class component
body: <p>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. </p>
  
  <p>I'm working with the I18nextProvider. This is my App.js file. </p>
  
  <pre><code>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', () =&gt; {
        this.setState({ loading: false });
        setTimeout(() =&gt; this.setState({ loaded: true }), 500);
      });
    }
  
    render() {
      const { loaded, loading } = this.state;
      return (
        &lt;Provider store={store}&gt;
          &lt;BrowserRouter basename="/easydev"&gt;
            &lt;I18nextProvider i18n={i18next}&gt;
              &lt;ScrollToTop&gt;
                {!loaded &amp;&amp;
                  &lt;div className={`load${loading ? '' : ' loaded'}`}&gt;
                    &lt;div className="load__icon-wrap"&gt;
                      &lt;svg className="load__icon"&gt;
                        &lt;path fill="#4ce1b6" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /&gt;
                      &lt;/svg&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                }
                &lt;div&gt;
                  &lt;Router /&gt;
                &lt;/div&gt;
              &lt;/ScrollToTop&gt;
            &lt;/I18nextProvider&gt;
          &lt;/BrowserRouter&gt;
        &lt;/Provider&gt;
      );
    }
  }
  
  export default hot(module)(App);
  </code></pre>
  
  <p>Now using it within a const based component is quite easy. Here is an example:</p>
  
  <pre><code>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 }) =&gt; (
    &lt;Col md={12} xl={3} lg={6} sm={12} xs={12}&gt;
      &lt;Card&gt;
        &lt;CardBody className="dashboard__health-chart-card"&gt;
          &lt;div className="card__title"&gt;
            &lt;h5 className="bold-text"&gt;{t('dashboard_fitness.heartrate')}&lt;/h5&gt;
          &lt;/div&gt;
          &lt;div className="dashboard__health-chart"&gt;
            &lt;div className="dashboard__health-chart-info"&gt;
              &lt;HeartOutlineIcon style={{ fill: '#ff4861' }} /&gt;
              &lt;p className="dashboard__health-chart-number"&gt;96&lt;/p&gt;
              &lt;p className="dashboard__health-chart-units"&gt;b/min&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/CardBody&gt;
      &lt;/Card&gt;
    &lt;/Col&gt;
  );
  
  InfoCard.propTypes = {
    t: PropTypes.func.isRequired,
  };
  
  export default translate('common')(InfoCard);
  </code></pre>
  
  <p>As you can see I just import the translate from the react-i18next and I'm almost ready to go with the t function. </p>
  
  <p>How can I achieve the same within a class component? I want to implement it in this class:</p>
  
  <pre><code>/* 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) =&gt; {
      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 (
        &lt;div className="trades-table__controls-wrap"&gt;
          &lt;div className="trades-table__controls"&gt;
            &lt;UncontrolledDropdown&gt;
              &lt;DropdownToggle className="icon icon--right" outline size="sm"&gt;
                &lt;p&gt;
                  {t('history.controls.show')}
                  {this.state.rows}
                  {t('history.controls.results')}
                  &lt;MenuDownIcon /&gt;
                &lt;/p&gt;
              &lt;/DropdownToggle&gt;
              &lt;DropdownMenu className="dropdown__menu"&gt;
                &lt;DropdownItem onClick={() =&gt; this.changeRowAmount(10)}&gt;10&lt;/DropdownItem&gt;
                &lt;DropdownItem onClick={() =&gt; this.changeRowAmount(25)}&gt;25&lt;/DropdownItem&gt;
                &lt;DropdownItem onClick={() =&gt; this.changeRowAmount(50)}&gt;50&lt;/DropdownItem&gt;
                &lt;DropdownItem onClick={() =&gt; this.changeRowAmount(100)}&gt;100&lt;/DropdownItem&gt;
              &lt;/DropdownMenu&gt;
            &lt;/UncontrolledDropdown&gt;
          &lt;/div&gt;
          &lt;div className="trades-table__controls-right"&gt;
            &lt;div className="trades-table__control-search"&gt;
              &lt;input placeholder="Search" /&gt;
              &lt;div className="trades-table__control-search-icon"&gt;&lt;MagnifyIcon /&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default translate('common')(TradesTableControls);
  </code></pre>
  
  <p>I'm quite new to React and ES6, but I was unable to find the solution online. Would really appreciate any help!</p>
  
  <p>Thanks!</p>