[bug][16.5.0] option returns [object Object] instead of string

What is the current behavior? <option> returns [object Object] instead string

Demo: https://codesandbox.io/s/ww5mv2w957

What is the expected behavior? Expected string

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

[gaearon]

Since we warned about this before (in 15), and it crashes in unexpected ways, I think the new behavior is actually a bugfix — both for the missing warning, and for inconsistent behavior. It’s very unfortunate that the warnings didn’t get emitted in some cases (to be clear, it did for components returning DOM nodes — but we missed the case for strings). But I think allowing crashes in this case is worse than addressing the problem head on.

The intended workaround if you’re using react-intl is indeed this: https://codesandbox.io/s/6yr4xy5ll3

If you use something else, just make what you’re passing to <option> as a child is actually a string: https://codesandbox.io/s/oom712ov79

Both of these cases don’t crash on updates, and work correctly. Again, very sorry we only discovered this now.

[Slatery]

If anyone still needs an answer to the original question, as mentioned in earlier comments and in the documentation here, you cannot use a formatted message in the format of

<select>
    <option value="foo">
        <FormattedMessage id="bar"/>
    </option>
</select>

instead I’ve found formating it as such does work:

<select>
    <FormattedMessage id="bar">
        {txt => <option value="foo">{txt}</option>}
    </FormattedMessage>
</select>

where txt will return the id’s default string for whichever Message Descriptor file is selected