How to sort an array of objects in reactjs/nextjs with props?

Question

I am trying to sort through an array of objects from an API call. I've tried a few things and they haven't worked. Currently what I have tried is to sort the array first and then map through it and then display it. The mapping works but not the sorting.

This is the object

{
  
    "labels_url": "https://api.github.com/repos/jaystack/repatch/labels{/name}",
    "releases_url": "https://api.github.com/repos/jaystack/repatch/releases{/id}",
    "deployments_url": "https://api.github.com/repos/jaystack/repatch/deployments",
    "created_at": "2017-06-25T20:50:11Z",
   

}

However, no sorting is taking place. The timestamp is in this format: "2017-06-25T20:50:11Z"

When I isolated this into an array, the timestamps were sorted. See below.

const sortedData = ["2017-06-25T20:50:11Z","2018-06-25T20:50:11Z", "2019-06-25T20:50:11Z", "2020-06-25T20:50:11Z"];
//sorted the data with a simple function for comparing
sortedData.sort(function(a,b){return a - b})
console.log(sortedData);

[
    "2017-06-25T20:50:11Z",
    "2018-06-25T20:50:11Z",
    "2019-06-25T20:50:11Z",
    "2020-06-25T20:50:11Z"
]

However, I tried chaining the.map method after this, it didn't work. This is what I have so far -

 <div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white">
         {data.items.sort(function(a,b) {return a.created_at - b.created_at})
         .map((d,t,s,u,p)=> (
           <div key={p} className=" border-red-600 p-5">
           <h1 key={t} className="text-2xl font-bold">{d.name}</h1>
           <p key={d} className="mb-5">{d.description}</p>
           <p key={s} >{d.score}</p>
           <p>{d.created_at}</p>
            <Link key={u} href={d.html_url}>
            <a className="bg-white text-black font-bold rounded-lg">Click me</a>
            </Link>
        </div>
         ))}

I suspect it is a path issue. I've tried changing the return statement like removing the 'created_at' or swapping the arguments. What am I missing? Do I need to push them into a separate array and then map through them again?

I hope this was enough information.

Answer 1

SOLVED --

it was missing 'new Date'

{data.items.sort(function(a,b) {return a.created_at > b.created_at}).map((b)=>

<div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white">
         {data.items.sort(function(a,b) {return new Date (b.created_at) - new Date(a.created_at)})
         .map((d)=> (
           <div key={d.id} className=" border-red-600 p-5">
           <h1 className="text-2xl font-bold">{d.name}</h1>
           <p className="mb-5">{d.description}</p>
         
           <p>{d.created_at}</p>
            <Link href={d.html_url}>
            <a className="bg-white text-black font-bold rounded-lg">Click me</a>
            </Link>
        </div>
         ))}

Answer 2

The callback function .map((d,t,s,u,p)=> ( takes 5 arguments but map's callback function only takes 3 arguments they are in sequence

1. Array Element
2. Element Index
3. Reference to Original Array

MDN Reference

Also, in your case it is sufficient to pass a unique key to div tag.

Update 1 Rearrange your sort and map code like below,

         {
            data.items.sort(function(a,b) {return a.created_at - b.created_at})
              .map(d => <div key={d.id} className=" border-red-600 p-5">
                  <h1 className="text-2xl font-bold">{d.name}</h1>
                  <p className="mb-5">{d.description}</p>
                  <p>{d.score}</p>
                  <p>{d.created_at}</p>
                  <Link href={d.html_url}>
                      <a className="bg-white text-black font-bold rounded-lg">Click me</a>
                  </Link>
                </div>)
          }