Sorting array by time and date using date-fns - reactjs

Question

I have an array with blog posts that I wanted sorted by newest entry. I'm able to map through the array just fine but I want the newest entry located at the very top of the page and right now it's going to the bottom. If I sort the array by time/date I know it will work but having issues getting it to sort.
const BlogTopic = [
{
title: "First Post",
message: "test",
author: "Dagger",
date: format(new Date(), "2/13 2:09a"),
},
{
title: "Second Post",
message: "test",
author: "Dagger",
date: format(new Date(), "2/13 3:48a"),
},
];
I'm also using a form to add new entries and it's saving all the above information and adding a new object at the end of the array. When it comes to adding a date I'm using this format.
date: format(new Date(), "M/dd h:mma"),
And this is my code for sorting the array.
const [topic, setTopic] = useState(BlogTopic);
{topic
.sort((a, b) => new Date(b.date) - new Date(a.date))
.map(({ title, author, date }, index) => (
<tr>
<td className="blog__topic">
{title}
</td>
<td>{author}</td>
<td>{date}</td>
</tr>
))}
UPDATE
Here is my full state. Any ideas for how I can change the 2/17 3:48a below so it automatically takes the current date and time?
const [title, setTitle] = useState();
const addTopic = (e) => {
e.preventDefault();
setTopic([
...topic,
{
title: title,
message,
author: "Dagger",
count: 1,
date: parse("2/17 3:48a", "M/dd h:mma", new Date()),
},
]);
setTitle("");
};

Answer 1

Ok, so, there are a few issues with your code. I'll try to fix them by reducing your code to the simplest form possible and work our way up to what you expect.
Let's start the simplification by taking a look at the dates in the array's objects. For the first object, you have format(new Date(), "2/13 2:09a"). Given that you stated that the format is M/dd h:mma, I can easily convert this date into an ISO one: 2023/02/13 02:09:00. The benefit of doing this is that this can be feed to new Date() very easily. If we apply those operations on both objects, we have the resulting array:
const BlogTopic = [
{
title: "First Post",
message: "test",
author: "Dagger",
date: new Date("2023/02/13 02:09:00"),
},
{
title: "Second Post",
message: "test",
author: "Dagger",
date: new Date("2023/02/13 03:48:00"),
},
];
Ok, so far so good. Now, let's move to the next bit: sorting. Since the dates are now as a Date object, sorting is trivial. In fact you already provided the code for sorting, you just needed to reverse the operands:
BlogTopic.sort((a, b) => b.date - a.date)
Please, note the following:
I kept the parameters order as you had them a, b
I reversed the substraction b - a instead of a - b
Since the date parameter is already a Date object, we don't need to wrap it again
Great! Now we have an array properly sorted. The next step is about displaying this. As you saw, if you try {new Date()}, React will complaint because you are trying to display an object. What we need to do, therefore, is to turn this object into some string representation before giving it to React. For now, we will keep it simple and use the toUTCString() method (this is just for the sole purpose of simplifying your code, keep reading for your expected solution). So, now, we can do the following (again, keep in mind I'm simplifying your code for the sake of explaining all this, I know there are other parameters like title and author);
BlogTopic.map(({ date }) => (
<tr><td>{date.toUTCString()}</td></tr>
)}
Very well! So far we have managed to have an array with dates, sort it and display it so, the final piece to the puzzle is to use the format you need. As you pointed out, we will use date-fns to assist us with this. Among many other methods, this library has the following 2 that we will be using:
format: Which takes a Date object and a pattern string and outputs an string with the date in the given format
parse: Which takes a string with the date, a pattern declaring which format your date currently is and a Date object to provide defaults
The good thing about those functions is that they use the same format for the pattern string... that's handy!
Let's focus on the data input, this is your array. What you want here is to turn a string with a date in it (f.e. "2/13 2:09a") into a Date object which means that, from those functions, you need parse. Let's rewrite the array with this function:
const BlogTopic = [
{
title: "First Post",
message: "test",
author: "Dagger",
date: parse("2/13 2:09a", "M/dd h:mma", new Date()),
},
{
title: "Second Post",
message: "test",
author: "Dagger",
date: parse("2/13 3:48a", "M/dd h:mma", new Date()),
},
];
The benefit here is that, because parse returns a Date object, any operations we do afterwards (like the sorting itself) can be kept as they are since we haven't changed the expected data type.
Finally, for displaying the date, we need a function that will take a Date object and turn it into a string, this is the job of the format function:
BlogTopic.map(({ date }) => (
<tr><td>{format(date, "M/dd h:mma")}</td></tr>
)}
And there you have it! If you have been following all along, you should now have a code that works the way you expected.