Sort the state (array of objects) by date in React

Question

Let's say you are given an array of objects in your React state, like this:

[
    {
      "id": "…",
      "title": "Brief history of Space Shuttle program",
      "date": "2016-10-29 19:00:00+01:00",
      "venue": "NASA History Museum"
    },
    {
      "id": "…",
      "title": "Why did the Challenger explode?",
      "date": "2016-11-31 18:30:00+01:00",
      "venue": "Albert II Library Building"
    }
  ]

Now you want to sort this by date, let's say you have a forum or something similar, where the first post should be the newest according to date.

How would you sort it? This was my attempt:

function sortExample (dataToSort) {
        let test = [...dataToSort];
        test.sort((a,b) => new Date(a.date) - new Date(b.date)
    }

Unfortunately, that didn't work out quite well. And most importantly, where would you place this function? I put it in my useEffect, that didn't seem to work for me either.

Hey there! Would you be able to share the rest of your code? Specifically, the useEffect code and the code related to fetching the data? — Amit Maraj
– Amit Maraj, Commented Apr 8, 2022 at 16:47

Irfanullah Jan · Accepted Answer · 2022-04-08 16:52:54Z

2

You have two options:

Sort it before you setState, this is recommended if you only need the data in this order everywhere.
Sort it where you use the data but keep the original data as is in the state.

Say we have:

const [dataInState, setDataInState] = useState([]);

First one:

useEffect(() => {
  fetch("/data")
    .then(res => res.json())
    .then(json => setDataInState(json.sort(myCompareFunc))
}, [])

Second one:

Set state as usual, then in component body, before return:

const sortedData = [...dataInState].sort(myCompareFunc)

Now you can use sortedData in JSX or elsewhere.

I recommend the first one due to performance reasons.

edited Apr 8, 2022 at 16:52

answered Apr 8, 2022 at 16:47

Irfanullah Jan

3,9204 gold badges32 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Sort the state (array of objects) by date in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related