I have a React component that renders a page with a title and some content.
The Page Component renders the title by applying different styles to all the words (separated by a space) in the title.
It works fine when the title is a string (I can use title.split(' ')...), but I need to use a JSX element as the title in some occasion. I'm using React-Intl for the translation, and I'm using a <FormattedMessage id='...'/> to translate the title.
How can I split the FormattedMessage JSX element into multiple React components so that I can apply an individual style?
Here's a sandbox illustrating the problem:
Press the "Switch to page..." button to view what it should look like.
Splitting the FormattedMessage component during render isn't possible I think. Also, I had no luck to render it (during render...) to extract the string from the output.
What you could try to do to get a string and then render it like the other titles is to take the id from children.props.id and resolving it to a string (using the values you pass to IntlProvider if those are available at this point.
Edit:
Looking at it again, the proper way to do is to apply the formatting inside FormattedMessage like so:
// App.js line 7
<FormattedMessage id="title.main">
{txt => <FormattedTitle>{txt}</FormattedTitle>}
</FormattedMessage>
This way children will already be formatted and you can use the existing component.