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.
You have two options:
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.