This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Render Content Based on a Number using react-intl FormattedMessage

    Damon BauerDamon Bauer

    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.

    Code

    Code

    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
    Transcript

    Transcript

    00:02 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.

    00:14 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 book.reviews.link which means if there are reviews in the book reviews array, then return that average. Otherwise, if book.reviews.link 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 book.reviews.link, 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.

    01:19 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.

    01:39 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.

    02:01 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.

    02:22 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.

    02:48 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.

    03:13 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.

    Discuss

    Discuss