Closed adharbert closed 4 years ago
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)
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.
I have followed steps for many online tutorials and I always get the following error:
TypeError: t is not a function
I'm using create-react-app to create the new application
Here is my il8n.js file:
Any ideas why this won't work? Everything I've looked shows these same steps for basic functionality, but this keeps throwing an error.