menu

LinguiJS

Community about internationalization of React and JavaScript apps using LinguiJS library

Channels
Team

[object Object] with standard Trans

October 14, 2019 at 5:37pm

[object Object] with standard Trans

October 14, 2019 at 5:37pm
I have a weird issue that I created a repro for here. I use a standard <Trans id="ui.message">Message</Trans> in a select and it displays [object Object].
It happens when I process a Trans statement as a child of another component. Any ideas why this might be happening?

October 31, 2019 at 10:08pm
Added a workaround on the ticket and the code sandbox
  • reply
  • like

November 12, 2019 at 1:42pm
The reason for this behavior is that the HTML element <option> only allows pure text nodes as children, no HTML tags. <Trans> is a React element, which results in [object Object] when stringified. So you have to use i18n._(…) as in your workaround, it's the only option.
  • reply
  • like