How can i modify the array.map function in react

Question

I have a code having map function in which it returns the number of elements.

 videos.length > 0 ?

        videos.map((i, index) => (
          <div key={index}>
            <a>                                                             
              <div>
                <span>Clip {index + 1}</span>
                <label>{i.duration}</label>
              </div>
            </a>
          </div>
        ))

        : null

Now what i want is i want a list in group of 6 elements.

e.g. the above code will give

 <div> video1 </div>
 <div> video2 </div>
 <div> video3 </div>
...
...

what i need is like

<div>
  <div> video 1 </div>
  <div> video 2 </div>
   ...
   ...
   <div> video 6
<div>

<div>
   <div> video 7 </div>
   <div> video 8 </div>
   ...
   ...
</div>
...
...

Answer 1

Sounds like you just need to chunk the array into sixths before mapping:

const videosChunked = [];
for (let i = 0; i < videos.length; i += 6) {
  videosChunked.push(videos.slice(i, i + 6));
}

videosChunked.map((chunk, chunkIndex) => (
  chunk => (
    <div>
      {chunk.map((video, i) => (
          <div key={i}>
            <a>                                                             
              <div>
                <span>Clip {chunkIndex * 6 + i + 1}</span>
                <label>{video.duration}</label>
              </div>
            </a>
          </div>
      ))}
    </div>
  )
));