question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trans cannot interpolate Components without text

See original GitHub issue

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)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:23 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
arracsocommented, Jul 13, 2017

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

0reactions
jamuhlcommented, May 12, 2020

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found