Children of <option> can't be React elements #655
Description
Describe the bug
When using a <select> element instead of a <ul> element to switch the language, it does not translate dropdown text properly.
To Reproduce
Use the following code in LocaleSwitcher.js.
import * as React from "react"
import { locales, activate } from "./i18n.config"
import { Trans } from "@lingui/react";
import "./LocaleSwitcher.css"
export function LocaleSwitcher() {
return (
<select className="LocaleSwitcher" onClick={(locale) => activate(locale) }>
{Object.keys(locales).map((locale) => (
<React.Fragment>
<Trans id={locales[locale]}/>
<option key={locale}><Trans id={locales[locale]}/></option>
</React.Fragment>
))}
</select>
)
}
Expected behavior
I expect the text in the dropdown to be translated. Notice that the first <Trans> element is translated but not the <Trans> element in the <option> tag - instead it shows [object Object] for each item in the dropdown.
- jsLingui version
3.0.0-10 - Create React App