score:1

Accepted answer

you can achieve that by first re-shaping the data using the reduce function, to group your notes by date. the following snippet demonstrates a possible implementation:

const groupbydate = (notesdata) => {
  return notesdata.reduce((groups, note) => {
    const date = new date(note.timestamp).todatestring()
    if (!groups.hasownproperty(date)) {
      groups[date] = []
    }
    groups[date].push(note)
    return groups
  }, {})
  
}

const testdata = [
  {
    timestamp: "2022-04-12t19:25:39.950747+00:00",
    name : "note 1"
  },
  {
    timestamp: "2022-04-12t19:25:39.950747+00:00",
    name : "note 2"
  }, {
    timestamp: "2022-05-12t19:25:39.950747+00:00",
    name : "note 3"
  }, {
    timestamp: "2022-05-12t19:25:39.950747+00:00",
    name : "note 4"
  }

]
console.log(groupbydate(testdata))

then you can render on notedate for each key of the resulting object, and a notecard for each note.

keep in mind that this is an expensive operations, an you might need to memoize it with usememo to avoid recomputing the grouped date with each render.

finally if you have access to the api code from which your getting the information, the correct way to handle this would probably be to do it server-side. grouping the notes by date would be way more performant if it was done by postgresql !


Related Query

More Query from same tag