React-i18next: Question: how does deep key works?

[Grsmto]

Hi,

I'm trying to access a translation from a deep object but I feel like I'm missing a point. Best is to check the Webpack Bin there.

en: {
        translations: {
          "actions": {
            "click": "click here"
          }
        }
}

<h2>{t('actions.click')}</h2> // will output "actions.click"!??? :/

Thanks for your help!

[jamuhl]

see i18n.js line 35 -> we turned keySeparation "off" - so keys can't be nested

having key "actions.click": "click here" would work but no actions: { click: "click here" } 

https://www.i18next.com/principles/fallback.html#key-fallback

[Grsmto]

🙏 thank you very much.

[jamuhl]

you're welcome

[sudthenerd]

Sorry but it's Not working.
I created different file for each namespace.
And have nested keys.
locale/en/customer.json
{
"title": {"key": "translation"}
}

locale/fr/customer.json
{
"title": {"key": "fr translation"}
}

as you can see, I have two file for namespace customer. and I want deep key support like
t('title.key')
But it's not working.

Thanks 😊

[sudthenerd]

I was using addResource to add resources dynamically.
and now I. Using
i18n.addResourceBundle(language, namespace, resourcesForLanguage, true)

n it's working fine.

Thanks community😊🤸🕺
Happy coding😊

[zevero]

Didn't get it from the above comments.
To use deep keys seperated by '.' just set
keySeparator: '.'
when set to false it wont look for deep keys (as for true)

[jamuhl]

@zevero yes default is . so not overriding it to false will do it -> not like to use it - set to false, like different char - set that

[flancer64]

Thanks, @sudthenerd !

Deep keys don't work with i18next.addResources, we need to use i18next.addResourceBundle.

Wrong way:

i18next.addResources('en', 'mySpace', {
    look: {
        deep: 'value of look deep'
    }
});
i18next.t('mySpace:look.deep'); // 'look.deep' - failed!

Right way:

i18next.addResourceBundle('en', 'mySpace', {
    look: {
        deep: 'value of look deep'
    }
}, true);
i18next.t('mySpace:look.deep'); // 'value of look deep' - succeed!