-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to translate items in an array of objects with i18n #645
Comments
It depends: If you're adding translations on init (options.resources) and therefore have no async loading of them you just can if using a backend and loading translations (or need to change language on runtime) you will need to find a way to translate on runtime -> not use content but render your text during render methods |
The issue is solve. Now is working and translating very well. Thank you for your support and work. |
If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project -> there are many ways to help this project 🙏 |
@JavierPons can elaborate more how you resolved this issue?? |
@shreyanshjain14 eg. like #1236 (comment) or #1306 (comment) or #909 (comment) endless existing issues discussing this |
@jamuhl thanks for the help i have below TS function import i18n from "../../i18n/config"; abc(setting: SecuritySetting, psVersion: string) {
} {i18n.t( |
const myExport = {}; function fill() { // run it initial // bind some events and fill values again (doing the magic you expect to happen magically) if i willl do something like this than i have to maintain many key value pairs in myExport = {}; object i will render the something like |
@shreyanshjain14 components will need somewhere an the rest is average programmer skills (understanding that |
@jamuhl actually the issue is the function abc is residing inside a class, so can not use the usetranslation hook here |
still....either your function is called during rendering or not...if not use the i18n.on to listen to events needing a rerun of that function but like written everywhere...simplest is to move translation closer to UI rendering...eg. by letting those functions you use build a key -> than use that key to get correct translation during rendering. |
here is the code, have a look class abc {
} so im maintainig the translated data object here, but still the data is not getting chnaged |
your code is a component... -> i18n.on ---> use on non-components |
@jamuhl
|
class components can't use hooks...useTranslation has alternatives like the HOC for such cases...https://react.i18next.com/latest/withtranslation-hoc |
First of all thank you for react-i18next, its a big work, very useful and as well for the fast answer yesterday. Till now I have been enjoying react-i18n translating an app into three different language. It works very well.
But I have an issue here with translate an array of objects. The problem is how to use and {t('')} if I want to translate the item CONTENT of object in the array.
What it would be easy and nice way to do it? Content is what it is seen at the front page menu. I want translate it.
I have my translate.json file with the translation.
"en": { "translation": { "frontpage":{ "home": "home", "price": "price" and so on.... } } }
`
imports here......
const mapStateToProps = (state, ownProps) => {
return {
navItems: navItems,
path: ownProps.location.pathname
}
}
const mapDispatchToProps = dispatch => {
return {
dispatch
}
}
const mergeProps = ( stateProps, dispatchProps, ownProps ) => Object.assign( {}, stateProps, dispatchProps, ownProps)
const FrontMainContainer = connect(mapStateToProps, mapDispatchToProps, mergeProps)(FrontMainComponent)
const navItems = [
{
name: 'home',
content: 'HOME',
url: '/home/home'
},
{
name: 'list-alt',
content: 'PRICE',
url: '/home/price'
},
{
name: 'info-circle',
content: 'QUESTIONS',
url: '/home/faq'
},
{
name: 'users',
content: 'SOMETHING A',
url: '/home/somethinga'
},
{
name: 'envelope',
content: 'SOMETHING B',
url: '/home/somethingb'
}
]
export default FrontMainContainer
`
The text was updated successfully, but these errors were encountered: