i18next/react: Trans displaying "undefined" in element

Viewed 52

I'm getting my bearing with i18next, but Trans is offering me riddles when I try to work with a link. Everything is working well with t{} so far (I'm working in React – JSX):

Here is the code that almost works (other approaches I tried didn't work at all):

<p className="button"><Trans i18nkey="home.p3" components={{ MyLink: <a href='beispiele.html'>link</a> }}/>{t('home.p3')}</p>

JSON: de:

{
 (…)
    "home": {
       (…)
        "p3": "Durchstöbern Sie unsere <5>Beispiele</5>.",
     (…)

    }
}

en:

{
    (…)
    "home": {
        (…)
        "p3": "View <MyLink>samples</MyLink> of our work.",
       (…)
    }
}

and this is how I initialize i18next:

i18next
  // detect user language
  // learn more: https://github.com/i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // init i18next
  // for all options read: https://www.i18next.com/overview/configuration-options
.init({
  debug: true,
  fallbackLng: 'de',                              // language to use
  resources: {
      en: {
          translation: common_en               // 'translation' is our custom namespace
      },
      de: {
          translation: common_de
      },
  },
});

The resulting text displayed: undefinedView samples of our work.

I've looked at the i18next documentation on using Trans, also trying to use <1></1> and similar to encapsulate the link. Each time "undefined" is displayed. I've gone through this tutorial, where it worked. And have been mirroring it as closely as possible. The Transelement is not being grasped, although there are no error messages.

I'd appreciate any tips on how I can further troubleshoot this. Many thanks!


ETA: thanks to Ahmet's eagle eye one mistake has been found. I'm not correcting it above, in case someone else runs into this problem: it should be i18nKey.

Further digging showed I have to place the JSON files in to the public folder to have the links work. For those looking into this: use i18next-http-backend in your init (i18n.use(Backend)) in your setup so you can reach the folder

1 Answers

There is a typo in your Trans component. You need to change the i18nkey prop to i18nKey.

You can take a look at this sandbox for a live working example.

Related