[React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage

In this lesson, we’ll use the react-intl FormattedHTMLMessage component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.

Note: FormattedHTMLMessage should be used sparingly because react-intlcannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a FormattedMessage component instead, and wrap that component with HTML markup.

 

For example we have the translation data as such:

  'en-US': {
    detail: {
      window: '<small><em>All {numMerchants} links open in a new window.</em></small>',
    }
}

It is a embbed HTML.

 

To use it we need to import 'FormattedHTMLMessage':

<FormattedHTMLMessage id="detail.window" values={{numMerchants: book.merchants.length}} />