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 Placeholders using react-intl FormattedMessage

    Damon BauerDamon Bauer
    15 - 16.8.4

    Learn how to use react-intl to set dynamic values into your language messages. We’ll also learn how to pass in those values by using a values prop in the react-intl FormattedMessage component.

    We'll also take a look at how to pass values with markup and still get all the benefits of translation.



    Become a Member to view code

    You must be a 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




    We'll start by adding some more strings to our messages file. Inside of the string, notice that I've added placeholders. These tokens will be replaced with content that we provide in the component when they're rendered.

    In our bookDetail component, let's replace the author heading here by adding a formattedMessage component. We'll add a prop of ID, and that's going to be set to

    Now I'll add a values prop which is where we'll be adding the values for the placeholders in the string we're translating. This prop accepts an object, so to it I'll add a key of author and I'll provide it a value of, so the key author here corresponds directly to the placeholder we added in the messages file here.

    Looking at the browser, you can see each language is now displaying the author heading in its own language. Let's replace this average rating heading next. First, what I want to do is extract this round function into a variable so it's a bit easier to read.

    I'll take all of this round here and let's move that up into a variable, we'll call it const averageRating equal to that method. Now we've got averageRating stored, we can get rid of this, and we can say formattedMessage, and that's an ID of detail.averageRating.

    We'll also give this a values prop, we'll give it a key of avg for average, and the value of averageRating which is the variable that we just set up here. Now our average rating heading is translated as well.

    Let's look at one more. I want to replace a reviewer's name and rating, so once again, I'll add a formattedMessage component with an ID prop of detail.userRating, along with a values prop -- remember that takes an object -- that's going to take a key of name as well as a key of rating.

    I'll start with rating, the value here is just going to be review.rating, but name is a little bit different. Notice here we've got that wrapped in a strong tag. If we just put in like so, we would lose that bold formatting.

    Thankfully React Intl allows us to pass markup as a value, so we can actually just take this entire strong tag and set that to the value of the name prop here. Now I can get rid of that code, now I'll just add a BR tag so we can see that definition clearly.

    Now, if you look at the browser you can see each person's name is still bold, but the rated it text is translated to the correct language.