Блог

Я создаю веб-сайт для заказа еды. На главной странице я получаю все изображения продуктов питания из своей базы данных, а затем, как вы видите в приведенном ниже коде, я использую docs.map для отображения всех изображений. Проблема в том, что я хочу иметь максимум два изображения внутри тега ul, но прямо сейчас все изображения помещаются в один ul. Итак, если бы было 6 изображений, также было бы 3 ul.

 <div className="cards__wrapper">
          <ul className="cards__items">
            {docs amp;amp;
              docs.map((doc) => (
                <CardItem
                  src={doc.url}
                  key={doc.id}
                  text={doc.imageText}
                  price={doc.price}
                  id={doc.id}
                ></CardItem>
              ))}
          </ul>
        </div>

 

Вы можете разбить массив на требуемые фрагменты и отобразить данные на основе этого. Я привел пример для этого. вы можете проверить это

Функция разделения

  var chunks = function (array, size = 2) {
    var results = [];
    while (array.length) {
      results.push(array.splice(0, size));
    }
    return results;
  };

 const data = chunks(lists, 2);
 

Визуализация :

    {data.map((childs, index) => {
        return (
          <ul>
            {childs.map((c, cindex) => {
              return <li>{c   index   cindex}</li>;
            })}
          </ul>
        );
      })}
 

   const docs = [1, 2, 3, 4, 5, 6, 7];
  const ulArr = [];

  docs.forEach((item, i, arr) => {
    if (i % 2 !== 0) {
      ulArr.push([arr[i - 1], item]); //add 2 elements ib Array
    }

    if (i == arr.length - 1) {
      ulArr.push([item]) //add last element in last array
    }
  })
 

Вам нужно пройти через ulArr через карту и вернуть одну карту с элементами LI