@Lirrr
Учусь вебу

Как правильно перебрать циклом слайды и карточки внутри них?

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

Есть объект с данными для карточек, 6 карточек и 2 слайда. Нужно перебрать все это циклом, чтобы в каждый слайд вставлялись по 3 карточки с заполненными данными из объекта, и если добавить в объект еще 3 карточки, то чтобы они корректно отобразились. Подскажите, как это можно сделать?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Нужны две вещи.

Первая - функция, которая порежет массив на куски:

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

Вторая - компонент карточки (почему до этого не додумались сами, непонятно; шесть раз повторили один и тот же кусок кода - неужели ничего в голове не щёлкнуло?):

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>
);

После этого останется только получить массив, состоящий из массивов данных для отдельных карточек:

const chunkedItems = chunks(items, 3);

И отрендерить его:

<Swiper>
  {chunkedItems.map(cardItems => (
    <SwiperSlide className="swiper-slide style-review__slide">
      {cardItems.map(n => <Card {...n} />)}
    </SwiperSlide>
  ))}
</Swiper>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы