Trans cannot interpolate Components without text
See original GitHub issueI 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)
Issue Analytics
- State:
- Created 6 years ago
- Comments:23 (13 by maintainers)
Top Results From Across the Web
Trans Component - react-i18next documentation
It does ONLY interpolation. It does not rerender on language change or load any translations needed. Check useTranslation hook or ...
Read more >How to interpolate two <a> tags with the Trans component that ...
I want to interpolate a text with two links so that it looks like this: Image of the output I am looking for...
Read more >API Reference - styled-components
You can pass an arbitrary classname to a styled component without problem and it will be applied next to the styles defined by...
Read more >Components | Format.JS
Render React elements that seamlessly compose with other React components. Support rich-text string/message formatting in <FormattedMessage> .
Read more >In-context mode issue with angular interpolation
Hi, There is an issue when using in-context mode with angular official translation system. When translating text with some angular template ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

Ok. Now I understand why it works the way it does.
Then fix the error and wrap your stuff in a Text component…learn react, react-native…or hire someone supporting you…again - your problem is not an issue with react-i18next