How to loop through slides and cards inside them?

Question

JavaScript

https://codesandbox.io/s/mystifying-proskuriakova-huimi

There is an object with data for cards, 6 cards and 2 slides. It is necessary to go through all this in a loop so that 3 cards with filled data from the object are inserted into each slide, and if you add 3 more cards to the object, then they will be displayed correctly. Tell me how can this be done?

Answer 1

Two things are needed.
The first is a function that will cut the array into pieces:

const chunks = (arr, chunkSize) => Array.from(
  { length: Math.ceil(items.length / chunkSize) },
  (n, i) => items.slice(i * chunkSize, (i + 1) * chunkSize)
);

The second is the card component:

const Card = props => (
  <div className="style-review__slide-row">
    <a className="style-card style-review__style-card" href="#">
      <div className="style-card__overlay">
        <div className="style-card__title">{props.title}</div>
        <div className="style-card__category">
          {props.category}
        </div>
      </div>
    </a>
  </div>
);

After that, all that remains is to get an array consisting of data arrays for individual cards: And render it:
const chunkedItems = chunks(items, 3);

<Swiper>
  {chunkedItems.map(cardItems => (
    <SwiperSlide className="swiper-slide style-review__slide">
      {cardItems.map(n => <Card {...n} />)}
    </SwiperSlide>
  ))}
</Swiper>