Comments (2)
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.
Related Issues (20)
- Change translation resolution HOT 18
- Migration guide for up to v19 HOT 4
- Extended example in "Getting Started" uses deprecated XHR backend HOT 1
- Need help to "Plurals" for muti-language support HOT 4
- Django-i18next is not related to i18next HOT 2
- Missing Keys when target="_blank" HOT 4
- loading translate not working a server side HOT 1
- Improve docs on nesting/multiple counts
- Getting started i18next.init() too complicated for beginners HOT 6
- copy paste issue in docs HOT 1
- Documentation contradicts itself concerning support of json format HOT 3
- "Supported frameworks" needs cleanup HOT 1
- Fallback parsing HOT 1
- How to use Interpolation in html attributes tag HOT 7
- Language change can be reflected to URL route? HOT 6
- node_modules/react-i18next/ts4.1/index.d.ts(259,35): error TS2344: Type 'undefined' does not satisfy the constraint 'KeyPrefix<N>'.
- Setting default language to 'dev' HOT 3
- 404 and Broken link! HOT 1
- Intellisense works only with TypeScript v5, while in documentation it's just recommendation to use v5 HOT 2
- Add dark mode? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18next-gitbook.