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 Based on a Number using react-intl FormattedMessage

    15 - 16.8.4

    Using the react-intl FormattedMessage component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop.

    You’ll also learn the syntax necessary to render strings using a plural string matcher.



    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 take a look at rendering a complex message. Currently, no matter how many reviews a book has, even if it's zero, our app always renders the number of reviews than the word reviews.

    Let's change this to be a bit more friendly. First, let's update this average rating constant to be a ternary operator. We'll say which means if there are reviews in the book reviews array, then return that average. Otherwise, if is falsy, meaning there are no reviews, we'll return 0Next, I'll add another entry into the average rating formatted message component, and I'll just format that here. I want to add another value key, and I'll say count. To the account key I'll add, and I'm also going to delete this text in the parentheses, as we'll be moving that into the messages file which we'll take a look at now.

    Instead of always rending a number and then the word reviews, we'll render something different, depending on the number. I'll add the parentheses back and we'll add an INTL placeholder tag, and that's just the curly braces. I'll parse our account prop, I'll add a comma, and the key word of plural.

    Plural gives us the ability to render different messages based on the value of count. Next I'll add another comma, and we'll say if count = 0then we'll render another INTL placeholder tag, and we'll render the text no reviews yet.

    I'll go past the placeholder tag there, and we'll type the key word of one. If there's one review or in this case if count is one, we'll pass another INTL placeholder tag. This time we're going to say # review.

    What this means is this # is a token that will be replaced with count. If there's one review, the number one will replace the pound symbol here. Then we'll have the word review. I'll add a space and then I'll say other, and another placeholder tag. I'll add another # with the word reviews, plural.

    If count = 0we'll render no reviews yet. If there's 1 review, we'll say 1 review. Otherwise, we'll say the number of reviews and then the word reviews. I'll add this in the different languages, and now we can see our average rating is still displayed, and we've got the number of reviews in the parentheses.

    Just so we can see, I'll update this book to have 0reviews. With that change we can see the no reviews yet text is displayed. I'll update this book to have one review now. You can see that text is displayed now as well.