[React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)

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.

 

averageRating: 'Average Rating: {avg} ({count, plural, =0 {No reviews Yet!} one {# review} other {# reviews}})',

Based on the variable 'count', if =0, then show 'no review yet'; if equals to one, then showing '1 review', if more than one, then showing ''# reveiws", "#" will be replaced by the actual number.

 

    const avgRating = book.reviews.length ? round(meanBy(book.reviews, (r) => r.rating), 2): 0;

      <h3>
        <FormattedMessage id="detail.averageRating" values={{
          avg: avgRating,
          count: book.reviews.length
        }} />
      </h3>