Always get "t" is not a function error about i18next-gitbook HOT 2 CLOSED

Your first react app?

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = (props) => {
  const {t} = props;

  return (
    <div className="App">
      <header className="App-header">
        <p>React test</p>
      </header>
      <div>
      {t("Introduction")}
      </div>
    </div>
  );
}

export default App;

Why should the t function be in the props? You did not add it and no HOC is used. In react there is no way to get things into the props magically -> use https://react.i18next.com/latest/withtranslation-hoc

or better https://react.i18next.com/latest/usetranslation-hook in functional components...

hope this helps...also be aware to use Suspense or turn that off (Suspense component must be outside the component using HOC or hook) https://react.i18next.com/latest/usetranslation-hook#not-using-suspense (you can turn that off globally too - but Suspense is nice - learn about it)

from i18next-gitbook.

At the end of app.js, try to wrap your component when exporting:
const enhance = compose(withTranslation());
export default (enhance(App);

and don't forget the imports you need:
import {compose} from 'redux';
import {withTranslation} from 'react-i18next';
This is how it works for me.

from i18next-gitbook.