Реагировать, рендеринг div из массива объектов со специальным условием - PullRequest
Новая
       16

Реагировать, рендеринг div из массива объектов со специальным условием

0 голосов
/ 14 июня 2019

Итак, в основном я хочу визуализировать элементы div из массива объектов со специальным условием (в каждой строке будет 6 элементов div столбца), если в массиве 9 объектов, то в первой строке будет 6 элементов div столбца, а во второй строке 3 столбца дел. Массив представляет собой массив объектов. 

So basically, I want to render divs from array of objects with special condition ( every rows will have 6 column divs), if the array have 9 objects, then the first row will have 6 column divs then the second row will have 3 column divs.
The array is an array of objects.

    let arrObj= [
      {
        "img": "/img/img.svg",
        "alt": "img1",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img2",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img3",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img4",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img5",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img6",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img7",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img8",
        "link": "https://home.com"
      },
      {
        "img": "/img/img.svg",
        "alt": "img9",
        "link": "https://home.com"
      }
    ] 

      const renderIcons = (i) => {
        const icon = arrObj[i];
        return (
          <div key={i} className="col-sm-6 col-md-4 img-container">
            <a href={icon.link} >
              <img src={icon.img} alt={icon.alt} />
              <p>{icon.alt}</p>}
            </a>
          </div>
        )
      } 
    const rowSize = 6;
      const rowIcons = []
      for (let i = 0; i < arrObj.length / rowSize; i++) {
        let iconsInRow = [];
        for (let n = 0; n < rowSize; n++) {
          iconsInRow.push(renderIcons(( n)))
        }
        rowIcons.push(<div key={i} className="row" >{iconsInRow}</div>)
      } 

// then render those icons on render()
<div> {rowIcons}</div>

Что ж, в итоге я получаю две одинаковые строки столбцов, и я знаю, почему это происходит, во вложенном цикле for iconsInRow выдвигается (iconsInRow -1) раз. Поэтому я хочу, чтобы в массиве было 9 объектов, тогда в первой строке будет 6 столбцов, а во второй - 3 столбца. Обратите внимание, что arrObj является динамическим, он может увеличиваться в длине или уменьшаться. Поэтому я хочу найти хорошее решение для этой ситуации, любые решения приветствуются.

Обновлено с решением от @ Titus 

    const renderIcons = (i) => {
                     const icon =arrObj[i];
                     return (
                           <div key={i} className="col-sm-6 col-md-4 img-container">
                             <a href={icon.link} >
                               <img src={icon.img} alt={icon.alt} />
                               <p>{icon.alt}</p>
                            </a>
                          </div>
                      )
                   } 
            const rowSize = 6;
              const rowIcons = []
              for (let i = 0; i < arrObj.length / rowSize; i++) {
                let iconsInRow = [];
                for (let n = 0; n < rowSize; n++) {
                  let renderTimes = n + (i * rowSize);
                  renderTimes<arrObj.length &&
                     iconsInRow.push(renderIcons(renderTimes))
                }
                rowIcons.push(<div key={i} className="row" >{iconsInRow}</div>)
              }
...