React-i18next: Can't translate deep keys

Created on 18 Dec 2017  路  4Comments  路  Source: i18next/react-i18next

{
  "Modals": {
    "Terms": { "Customer" : "abcd" }
  }
  "Commons:" {
     "Buy Now": "Cumpara Acum"
   }
}
<I18n ns={['Modals', 'Commons']}>
        {
          (t, {i18n}) => (
           <div>
              <h1>{t('Commons:Buy Now')}</h1> <---works
              <p>{t('Modals:Terms.Customer')}</p> <- not working
              <p>{t('Modals.Terms.Customer')}</p> <- not working
              <p>{t('Modals.Terms:Customer')}</p> <- not working
           </div>
           )
        }
</I18n>

I just can't seem to figure it out how to acces translations in key's withing key's...any idea what i am doing wrong?

Most helpful comment

set keySeparator to . for Terms.Customer

All 4 comments

can you paste your i18next init config?

i guess you set keySeparator to false -> so no keys in form key.deep.somewhere allowed

`i18n
.use(LanguageDetector)
.init({
// we init with resources
resources: {
en
},
fallbackLng: 'en',

// have a common namespace used around the full app
ns: ['translations'],
defaultNS: 'translations',

keySeparator: true, // we use content as keys

interpolation: {
  escapeValue: false, // not needed for react!!
  formatSeparator: ','
},

react: {
  wait: true
}

});

export default i18n;`

yes you're right it was on false, put it to true but still can't figure out what to write to point it to the correct key :(

if i have{ key: deepKey: { x: "translation" } }. how do i get acces to x in the {t(' [...] ')} format?

set keySeparator to . for Terms.Customer

worked, thank you :)

Was this page helpful?
0 / 5 - 0 ratings