Trans component doesn't work with nested tags

[Saibamen]

Occurs in react-i18next version
react-i18next@10.12.2

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: #737 (comment)

or an alternative solution could be this: #928 (comment)

[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

[callmemarv]

For those who are still wondering about how to translate their nested tags correctly here is another example. As @adrai mentioned the children of a translated tag are indexed starting with 0 again so in order to reference the anchor element inside paragraph 2 we need to use index 1 because the paragraph has three children:
0: "This is paragraph 2 with"
1: <a>
2: .

Component

<Trans i18nKey="EXAMPLE.TEXT">
    Ignore this text.
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2 with <a href="https://github.com/i18next/react-i18next/issues/928">a link</a>.</p>
    <p>This is paragraph 3.</p>
    Ignore this text as well.
</Trans>

Translation JSON

  "EXAMPLE": {
    "TEXT": "<1>Translated paragraph 1.</1><2>Translated paragraph 2 with <1>translated link</1>.</2><3>Translated paragraph 3.</3>"
  }

Outcome
Translated paragraph 1.
Translated paragraph 2 with translated link.
Translated paragraph 3.

In our team we only use the tags as building blocks in our components so we would achieve the same outcome like this:

Component

<Trans i18nKey="EXAMPLE.TEXT">
    <p/>
    <p><a href="#"/></p>
    <p/>
</Trans>

Translation JSON

"EXAMPLE": {
  "TEXT": "<0>Translated paragraph 1.</0><1>Translated paragraph 2 with <0>translated link</0>.</1><2>Translated paragraph 3.</2>"
}

[demedos]

Is this supposed to work when passing children as components to Trans? Such as

Component

<Trans
  i18nKey="example.text"
  components={[
    <p key="<0>" />,
    <a key="<1>" href="#" />,
  ]}
/>

Translation JSON

"example": {
  "text": "<0>Translated paragraph with <1>anchor</1>.</0>"
}

I have tried but it seems like it just renders everything as plain text in the paragraph.

[jamuhl]

@demedos no...there is no code looking for key="<0>"

https://react.i18next.com/latest/trans-component#alternative-usage-which-lists-the-components-v11.6.0

[MrBr]

Nested indexed components should be nested in elements passed in components and they respect the nested index order starting from zero. For example:

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

Can be properly translated with components by changing translation to:

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

The first indexed component index is 0, since it's the first one in the "root scope", and the nested index component is also 0 since it's the first index in the "scope". Now use listed components:

<Trans i18nKey="myLangText" components={[<span><u/></span>]}/>

Or in children

<Trans i18nKey="myLangText" >
  <span><u/></span>
</Trans>