React-i18next: Trans component doesn't work with nested tags

[Saibamen]

Occurs in react-i18next version
[email protected]

To Reproduce

Render:

<Trans i18nKey="myLangText">
    Please click on <span onClick={this.toggleTipsModal}><u>here</u></span> for further information.
</Trans>

Lang:

"myLangText": "Please click on <1><2>here</2></1> for further information.",

Expected behaviour

Please click on <span><u>here</u></span> for further information.

Current behaviour

Please click on <span>here</span> for further information.

OS (please complete the following information):

• Browser: Latest Chrome for Windows

[Saibamen]

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import EN from './translations/en/lang.json'

// translations
const resources = {
    en: {
        translation: EN
    }
};

i18n
    // pass the i18n instance to the react-i18next components.
    // Alternative use the I18nextProvider: https://react.i18next.com/components/i18nextprovider
    .use(initReactI18next)
    .init({
        resources,
        lng: 'en',
        fallbackLng: 'en',
        interpolation: {
            escapeValue: false // React already safes from XSS
        },
        // special options for react-i18next
        // learn more: https://react.i18next.com/components/i18next-instance
        react: {
            wait: true,
        },
    });

export default i18n;

[adrai]

To solve this you need to create a dedicated component, like:

function Clickable() {
  return <span onClick={this.toggleTipsModal}>
    <u>here</u>
  </span>
}

and then use it like:

<Trans i18nKey="myLangText">
  Please click on
  <Clickable />
  for further information.
</Trans>

like here: https://github.com/i18next/react-i18next/issues/737#issuecomment-464026970

_or an alternative solution could be this: https://github.com/i18next/react-i18next/issues/928#issuecomment-523442122_

[Saibamen]

So this is a bug in react-i18next.
I must use old way to translate:
{t('pleaseClick')} <span onClick={this.toggleTipsModal}><u>{t('here')}</u></span> {t('forFurther')}

[adrai]

No. I suggested just to create a separate component... not to split every part in a dedicated key.
Have you tried my suggestion? You don’t need to change your translations at all. Just create such a “Clickable” react component.

[adrai]

In theory if you keep everything like you had in the beginning, but change the translation value to:

...
myLangText: "Please click on <1><0>here</0></1> for further information."
...

it should work too.

So just change your <2> tag to <0> tag

Can you try this @Saibamen?

[Saibamen]

1. Creating separate function is not a solution
2. <1><0>here</0></1> works, so this is bug with ordering tags (sequence)

[adrai]

It’s not a bug, because the ast is nested, so it indexes all children and starts at 0, but will ask @jamuhl to be sure.

[jamuhl]

https://react.i18next.com/latest/trans-component#how-to-get-the-correct-translation-string