Nested HTML element within Trans seems like not working

Describe the bug Nested HTML element within Trans seems like not working

Occurs in react-i18next version 10.11.3

To Reproduce Steps to reproduce the behavior:

i have this

<Trans i18nKey={"Are you sure you want to <0>delete</0> account  <0><1>{{name}}</1></0>  ?"} values={{name}} components={[<b key={0} />, <i key={1} />]} >
</Trans>               

{{name}} should be bold then italic, however, it becomes simply not shown.

[tisoap]

Oh, now I finally understand how the components prop works! For future readers reference, this is how I could have written my example above to get the expected results:

const keys = [
  'test1', // "<0>Text inside paragraph</0>"
  'test2', // "<0>Text inside paragraph with <0>bold text</0></0>",
  'test3', // "just some <1>bold text</1>",
  'test4' // "<0>Text inside paragraph with <1>a link</1> for the user</0>"
]

// ...

<ul>
  {keys.map(key => (
    <li key={key}>
      <Trans
        i18nKey={key}
        components={[
          // index 0
          <p>
            { /* New nesting level means the index starts over */ }
            <strong /> { /* index 0 */ }
            <a href='#' /> { /* index 1 */ }
          </p>,
          // index 1
          <strong />
        ]}
      />
    </li>
  ))}
</ul>

[tisoap]

But to be fair, this is a rather confusing API, that yields an awkward components prop declaration and hard to maintain translation texts like <0><0><0>this</0></0></0>.

I see there’s already some ongoing discussion at #833 to allow for named placeholders by passing an object to components prop, which would help a lot.

In my opinion, making the numbered placeholders match the equivalent position in the components array would be a more intuitive API than having to track nesting levels.

But more importantly, how to use <Trans> with nested components should definitely be in the documentation.