react-i18next: Trans cannot interpolate Components without text

I would like to interpolate an input tag into a localized text. I do not care about localizing the value field (though I could do that with the translate HOC and t), but the Trans component just removes it from the rendered output.

<Trans i18nKey="share">
  <input value="copyme" readOnly />
</Trans>

share: 'Interpolated <0></0> component',

Also, when using a tag like a and either:

  • putting no text contents in children (<a href...></a>) but in the translation (<1>asd</1>)
  • putting text in children (<a href...>asd</a>) but none in the translation (<1></1>)

the component crashes:

Uncaught TypeError: Cannot read property 'split' of undefined
at getChildren (eval at <anonymous> (main.js:3801), <anonymous>:64:23)
at eval (eval at <anonymous> (main.js:3801), <anonymous>:84:23)
at Array.reduce (<anonymous>)
at getChildren (eval at <anonymous> (main.js:3801), <anonymous>:69:21)
at renderNodes (eval at <anonymous> (main.js:3801), <anonymous>:100:10)
at Trans.render (eval at <anonymous> (main.js:3801), <anonymous>:141:68)
at eval (eval at <anonymous> (main.js:3312), <anonymous>:796:21)
at measureLifeCyclePerf (eval at <anonymous> (main.js:3312), <anonymous>:75:12)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (eval at <anonymous> (main.js:3312), <anonymous>:795:25)
at ReactCompositeComponentWrapper._renderValidatedComponent (eval at <anonymous> (main.js:3312), <anonymous>:822:32)

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Comments: 23 (13 by maintainers)

Most upvoted comments

Ok. Now I understand why it works the way it does.