Trans component doesn't work with nested tags

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

[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?

[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>"
}