How to format specific words in a sentence in react-intl

Question

How to render nested elements in react-intl

What I'm trying to render:

<FormattedMessage>
    This is a <strong>House</strong>
</FormattedMessage>

This has been discussed here and there should be examples in the docs, but I can't find them.

Answer 1

What you want is called Rich Text Formatting. Here is an example:

{
  "SENTENCE_WITH_BOLD_WORDS": "This is a <b>house</b>"
}

<FormattedMessage
  id="SENTENCE_WITH_BOLD_WORDS"
  values={{
    b: (chunks) => <strong style={{ color: "red" }}>{chunks}</strong>
  }}
/>

Live Demo