[React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative

Posted 2020-09-30 Answer1215

Given a date, we’ll use the react-intl FormattedRelative component to render a date in a human readable format, such as “2 days ago”, in various languages.

We\'ll also see how to set the frequency of this component\'s rendering to make our app update the text in real-time.

 

                <FormattedRelative 
                  value={new Date(review.date)}
                  style="numeric"
                  />

 

Since the FormattedRelative component udpate in real time, so you can also control the update interval:

                <FormattedRelative 
                  value={new Date(review.date)}
                  updateInterval={1000}
                  style="numeric"
                  />

Notice that it will cause extra unecessary component render.