CODEWITHSUNDEEP
reactjsinternationalizationi18nextreact-i18next
Andrea D_
Andrea D_

Reputation: 2141

How do I set the key of {t('key', {value})} dynamically with react-i18next

I am writing the top navbar with React and I am trying to implement the translation with react-i18next. Everything works until U try to set the key of {t('HOW DO I GET THIS DYNAMIC??'} dynamically.

I loop through the array of the items of the navbar and for each one of them I get the dynamic value and set it as the value of the variable inside the translation.json, but I cannot make the key dynamic, I tried with {item} but is not working.

Code:

  const { t } = useTranslation();
  const menuItem = ['Pool', 'Mining', 'Leveraged', 'Lock up', 'Docs', 'Profile'];
  {menuItem.map((item, idx) => (
    <Link key={item} to="/">
      <Button className={classes.item}>{t('HOW DO I GET THIS DYNAMIC??')}</Button>
    </Link>
  ))}

This is the en translation file:

{
    "Pool": "Pool",
    "Mining": "Mining",
    "Leveraged": "Leveraged",
    "Lock up": "Lock Up",
    "Docs": "Docs",
    "Profile": "Profile"
}

Ant this is my zh translation file:

{
    "Pool": "存款池",
    "Mining": "存款挖矿",
    "Leveraged": "杠杆挖矿",
    "Lock up": "锁仓",
    "Docs": "文档",
    "Profile": "我的"
}

Upvotes: 2

Views: 14705

Answers (2)

Michael Villalba Sotelo
Michael Villalba Sotelo

Reputation: 298

According to the i18next documentation: you can access the translation like this:

t([item])

https://www.i18next.com/translation-function/essentials#multiple-fallback-keys

Upvotes: 0

Francesco Orsi
Francesco Orsi

Reputation: 2089

Inside the t function you can call that value dynamically with ${item} or [item] as {item} will not work. Hope this was helpful.

Upvotes: 2

Related Questions