have to make divider like in history

Question

backlog - I am trying to make a copy of youtube and working on history page I want it to be displayed like this : to add some divider between videos

I have tried to do something myself and got this code

videos.map((video,index)=>{
                if(index>=1){
                    console.log(videos[index-1].watched_time);
                    if(videos[index-1].watched_time.split('T')[0]===video.watched_time.split('T')[0])
                        return <Video video={video} key={video.index}/>;
                    else{
                        index-=1;
                        return <Divider data={video.watched_time.split('T')[0]}/>
                }}
                else{
                    return <Video video={video} key={video.index}/>;
                }
            })}

The Result:

Answer 1

I would recommend that you first group the data by date and then run the loop.

I leave you an example:

const videos = [
  {
    name: 'v1',
    date: '2022-05-09'
  },
  {
    name: 'v2',
    date: '2022-05-10'
  },
  {
    name: 'v3',
    date: '2022-05-10'
  }
];

const grouped = videos.reduce((acc, ele) => {
  acc[ele.date] = (acc[ele.date] ?? []).concat([ele]);
  return acc;
}, {});

Object.entries(grouped).map(([title, videos]) => {
  console.log(title);
  // Component header
  // <Header value={title} />
  videos.map(video => {
    console.log(video);
    // Component Video
    // <Video video={video} key={video.index}/>
  });
});