[object Object] on a standard Trans in selects

Describe the bug I get [object Object] on some standard <Trans id="ui.foo">Foo</Trans> renders.

This happens only in some cases, and it seems to occur on Selects. The id is in the po file and compiled to js.

I’ve tried downgrading to 2.7.4 which didn’t help.

To Reproduce

https://codesandbox.io/s/boring-glitter-i847j

Expected behavior Display js file or default.

Workaround Replacing the Trans in question with an i18n._(t('ui.xyz')XYZ) resolves the issue. I will update the code sandbox with this.

Additional context

• jsLingui version 2.7.4 | 2.8.3
• Babel version 7.5.5
• Your Babel config (e.g. .babelrc)

[tricoder42]

Hey @mschipperheyn, unfortunately this isn’t related to Lingui as React itself doesn’t allow <option> to have React elements. See https://github.com/lingui/js-lingui/issues/655#issuecomment-621637390

This would cause the same problem:

        <select>
          <option>Text</option>
          <option>
            <p>Element</p>
          </option>
        </select>

We have to use i18n._ or t macro here

[wpq0]

FWIW, here’s my work around https://codesandbox.io/s/silly-keller-475lp:

<Select name="test">
      <Trans id="ui.select" render={<option value=""></option>}>Select something</Trans>
      <Trans id="ui.one" render={<option value="1"></option>}>One</Trans>
      <Trans id="ui.two" render={<option value="2"></option>}>Two</Trans>
</Select>