How to sorted array with createdAt in mapping react?

Question

I am trying to sort an array users that have don't have the InvitesApplication.createdAt -> the user that have lastest createdAt in this team.

Here is my code sand box for an example: https://codesandbox.io/s/jovial-pasteur-seusw?file=/src/App.js

Update add code into question:

export default function App() {
  const [thisTeamId, setThisTeamId] = useState(3);

  const users = [
    {
      InvitesApplications: [
        {
          teamId: 1,
          response: "Waiting on response",
          createdAt: "2021-05-08T10:02:40.340Z"
        }
      ],
      Memberships: [{ teamId: 2 }],
      fullname: "Nathan"
    },
    {
      InvitesApplications: [
        {
          teamId: 2,
          response: "Waiting on response",
          createdAt: "2021-05-08T10:41:35.921Z"
        }
      ],
      Memberships: [{ teamId: 1 }],
      fullname: "Nick"
    },
    {
      InvitesApplications: [
        {
          teamId: 2,
          response: "Waiting on response",
          createdAt: "2021-05-08T05:38:51.554Z"
        },
        {
          teamId: 1,
          response: "Waiting on response",
          createdAt: "2021-05-09T02:57:13.047Z"
        }
      ],
      Memberships: [],
      fullname: "Nancy"
    },
    {
      InvitesApplications: [],
      Memberships: [],
      fullname: "PPP"
    }
  ];

  return (
    <div className="App">
      {users
        .filter(
          (user) =>
            user.Memberships.length < 1 ||
            user.Memberships.every((member) => member.teamId !== thisTeamId)
        )
        .sort(
          (a, b) =>
            new Date(b.InvitesApplications[0]?.createdAt) -
            new Date(a.InvitesApplications[0]?.createdAt)
        )
        .map((user, index) => (
          <div key={index}>
            <InviteCard user={user} thisTeamId={thisTeamId} />
          </div>
        ))}
    </div>
  );
}

How can I implement my sort function? It didn't show me the user that dont have have Invitations.createdAt first

Rashed Rahat · Accepted Answer · 2021-05-09 06:20:36Z

1

const users = [
    {
      InvitesApplications: [
        {
          teamId: 1,
          response: "Waiting on response",
          createdAt: "2021-05-08T10:02:40.340Z"
        }
      ],
      Memberships: [{ teamId: 2 }],
      fullname: "Nathan"
    },
    {
      InvitesApplications: [
        {
          teamId: 2,
          response: "Waiting on response",
          createdAt: "2021-05-08T10:41:35.921Z"
        }
      ],
      Memberships: [{ teamId: 1 }],
      fullname: "Nick"
    },
    {
      InvitesApplications: [
        {
          teamId: 2,
          response: "Waiting on response",
          createdAt: "2021-05-08T05:38:51.554Z"
        },
        {
          teamId: 1,
          response: "Waiting on response",
          createdAt: "2021-05-09T02:57:13.047Z"
        }
      ],
      Memberships: [],
      fullname: "Nancy"
    },
    {
      InvitesApplications: [],
      Memberships: [],
      fullname: "PPP"
    }
  ];

users.sort(function(a, b) {
  const keyA = new Date(a.InvitesApplications[0]?.createdAt),
  keyB = new Date(b.InvitesApplications[0]?.createdAt);

  // nulls sort before anything else
  if (a.InvitesApplications.length === 0 || b.InvitesApplications.length === 0) return -1;

  // Compare the 2 dates
  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});

console.log(users);

edited May 9, 2021 at 6:20

answered May 9, 2021 at 5:10

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nathan Over a year ago

PPP should appear first. Like if user dont have any Invitations createdAt should appear first

nathan Over a year ago

Thanks that helped but can you help me implement the show more and show less button in my codesandbox? I created it but I'm looking for a way that when I click show more It will just appear 1 item at a time and when show less it will dissappear 2 items at a time

Collectives™ on Stack Overflow

How to sorted array with createdAt in mapping react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related