Using <Translate> inside <options>

[luisamor]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

Hi!

I need translate some select <options> with the component. For example:

        <p className="hero__subtitle">
          <Translate id="hero__subtitle" description="home page subtitle">
            Other subtitle
          </Translate>
        </p>

        <div className="margin-bottom--lg">
          <select>
            <option value="left">
              <Translate id="test.left">Left</Translate>
            </option>
            <option value="right">
              <Translate id="test.left">Right</Translate>
            </option>
          </select>
        </div>

This renders an [object Object] string

This is a fork from https://docusaurus.new --> https://github.com/luisamor/docusaurus-options-issue

And you can test it in:
https://stackblitz.com/edit/github-zuuia5-wgx6mj?file=src/pages/index.js

Reproducible demo

https://stackblitz.com/edit/github-zuuia5-wgx6mj?file=src/pages/index.js

Steps to reproduce

Simply look at the in the main page. Expected behavior I wanna see the text or the translated text, not an object. Actual behavior inside a HTML renders an Object. Your environment Public source code: https://github.com/luisamor/docusaurus-options-issue Public site URL: https://stackblitz.com/edit/github-zuuia5-wgx6mj?file=src/pages/index.js Docusaurus version used: 2.1.0 Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 105.0.5195.125 & node >=16.14 Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS Monterey 12.2.1 Self-service [X] I'd be willing to fix this bug myself.

[Josh-Cena]

Hi—Translate is a JSX.Element, which is an object. If you want to use a string (which option accepts as its children), you need to use translate(). This is already mentioned in the docs: https://docusaurus.io/docs/i18n/tutorial#translate-your-react-code

Use the one that better fits the context semantically. For example, the <Translate> can be used as React children, while for props that expect a string, the callback can be used.

[Josh-Cena]

Docs updated in #8115 to make it more explicit