Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Render Content with Markup Using react-intl FormattedHTMLMessage

    15 - 16.8.4

    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-intl cannot 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.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Let's start by adding a string to our messages file that will tell the user that merchant links will open in the new window. Notice that I'm embedding markup directly in the string. I've also added a placeholder of numMerchants.

    In our bookDetail component, let's import formattedHTMLMessage from React Intl. Since we're going to be displaying a message about opening links in the new window, let's first add a target blank to those merchant links.

    We'll just say target='_blank' and we'll go below those merchant links. Now let's add a formattedHTMLMessage component. We'll pass an ID prop of detail.window, and a values prop of numMerchants, and that will be set to

    The link of this books.merchants array will be passed to numMerchants, which will replace the token in our messages file. Now you can see that we're displaying this text in each language, and it's formatted correctly as well.