0
192
Viewshave to make divider like in history
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:
·
Juan Pablo Isaza
1 answers
Answer question0
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}/>
});
});
·
Juan Pablo Isaza
Report
Answer question