Adding support for nested component inside Trans

[brumeregan]

Hi,
Please consider my PR for improve functionality of react-i18next.

• added support for nested components, like dynamic lists just on place in Trans component
  For now to include, for example, <ul> with several <li> we need to create additional Component and it makes supporting of code much more complicated (several components within one file... looks like hell ).
  So with this PR now Trans works like this
  <Trans i18nKey="key" components={[<ul>{['one', 'two'].map((item) => <li>{item}</li>}</ul>]} >

• added support for values from translation message.
  Another issue that really annoying me that for components we need to provide some value.
  for now:
  <Trans i18nKey="test" values={{v: 'some value'}} components={[<span>{''}</span>]} />
  I propose additional format:
  <Trans i18nKey="test" values={{v: 'some value'}} components={[<span />]} />
  and translation message will be without changes:
  "test": "some message <0>{{v}}</0>"

[jamuhl]

Does this also support:

<Trans i18nKey="key">My List:<ul>{['one', 'two'].map((item) => <li>{item}</li>}</ul></Trans>

[brumeregan]

@jamuhl yes, but in translation message it should be like:
"key": "result list: <1></1>"
Also add test for this case

[brumeregan]

can anybody help with failing builds?
2 failing tests also fails in master
and not sure about codeclimate issue..

[jamuhl]

Will need to check tomorrow...can't make much out of the error message

[jamuhl]

Was published in [email protected]

I also added the i18nIsDynamicList prop you can set on parent so the nodeToStrings creates the correct translation string for saveMissing: e0e140c#diff-3f70de7c1ba388c739ba6409eaaca576R528

<ul i18nIsDynamicList>{['a', 'b'].map(item => ( <li key={item}>{item}</li> ))}</ul>

[brumeregan]

thanks!! =)

[jamuhl]

Thank you for providing this PR...

[jamuhl]

updated docs: https://react.i18next.com/latest/trans-component#using-with-lists-v-10-5-0