Use React.Children API for accessing props.children

[Mossop]

In React props.children is intended to be an opaque type and for forwards compastibility you're meant to use the React.Children API for interacting with it (https://reactjs.org/docs/react-api.html#reactchildren). Right now though fluent uses it directly (f.e. https://github.com/projectfluent/fluent.js/blob/master/fluent-react/src/localized.ts#L53).

[stasm]

This code used to use React.Children.only, but in #230 we added support for wrapping <Localized> around strings only, rather than elements, and Children.only throws on a single string child, unfortunately.

// Localized wrapping an element with fallback
<Localized id="foo">
    <p>Fallback Foo</p>
</Localized>

// Localized wrapping a fallback string.
<Localized id="foo">
    Fallback Foo
</Localized>

In hindsight, I should have extracted the code path for string children into a separate component, e.g. <LocalizedText>. Perhaps that's something I could do in a future release (probably 2.x; I'd like to publish 1.x soon with the current API, even if it's not optimal).

Do you have other suggestions about how to fix this without inspecting props.children?

[Mossop]

Ah, looks like I've always misunderstood the term "opaque" in the docs and it actually just means that you can't be sure what it is, not that it may be something unknowable: facebook/react#12913 (comment)

[stasm]

Interesting, my first guess about opaque would be similar to yours. Thanks for finding that comment, it's helpful.