Conditionally Display Post Updated Date in React

Have you noticed some websites show when a post was last changed? It's cool, right? Here's why it's a good idea and how to do it easily with TS or JS in React.

Why show the updated date for a post or an article?

Seeing when a post was last updated is great for users. It tells them the information is fresh. For websites with blogs or articles, updating old posts is common. When you show the updated date, people trust your content more. SEO wise, It even helps your website rank better on search engines. That's like a double win!

Common issue with date comparison

One common issue when comparing dates arises when your database is configured to automatically generates a modified date. In such cases, the modified date might be greater than the published date with a few milliseconds. Consequently, when attempting a simple comparison between the published and modified dates for conditional rendering, both dates may appear in your blog post, even for unmodified posts. Obviously this might not be your intended behaviour.

Proper way to conditionally show the 'updated' date for a post or article in React frontend

There are many ways to properly compare dates in React and the method you are going to use might depend on how the modified date is saved with your backend logic or rendered in the frontend. The solution here lets you compare dates with a simple logic. If you're more into JavaScript, no worries. You can use the same trick by skipping the type declaration.

First, create a function to convert the date to numbers only: 

const convertDateToNumbersOnly = (date: string) => {
    const dateObject = new Date(date);
    //get the date in the format of YYYYMMDD
    return dateObject.toISOString().replace(/[^0-9]/g, "").slice(0, 8);
}

In the above function, here's what happens:

A regular expression is used to remove all non-numeric characters from the ISO format of the date and returns the date and time (including hours, minutes) in pure numeric format. You would notice that the format is in 'YYYMMDD' so millisecond is omitted in order to prevent the common issue that was previously explained earlier.