Вложенные изображения l oop JSX html построчно

Question

Я хочу визуализировать 3 изображения в строке, исходя из моего состояния редукции. Мне удалось заставить его работать, используя приведенный ниже код, но он мне кажется ужасно неаккуратным. Есть ли лучшая практика для достижения этого? Строка, в которой я делаю оператор if, проверяющий, является ли изображение неопределенным, объясняется тем, что иногда у меня есть несколько изображений, не кратных 3, и это делает мой разрыв l oop.

function renderImages(){
        let imgList = [];
        let j = 0;
        let counter = 3;
        for (var i = 0; i < Math.ceil(images.length / 3); i++){

            const insideDiv = [];
            for (j; j < counter; j++){

                if(typeof images[j] !== 'undefined'){
                    insideDiv.push(
                        <div id='blank-col' className="col col-sm col-emphasized">
                            <img className='tile-img' src={images[j].img[0]} alt={images[j].ref}/>
                        </div>
                    );
                };

            };
            counter += 3

            imgList.push(
                <div className="row row-emphasized">
                    {insideDiv}
                </div>
            )

        };

        return imgList;
    };

желаемым вывод:

<div className="row row-emphasized">
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[1]} alt={images[1].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[2]} alt={images[2].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[3]} alt={images[3].ref}/>
    </div>
</div>
<div className="row row-emphasized">
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[4]} alt={images[4].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[5]} alt={images[5].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[6]} alt={images[6].ref}/>
    </div>
</div>
<div className="row row-emphasized">
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[7]} alt={images[7].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[8]} alt={images[8].ref}/>
    </div>
    <div id='blank-col' className="col col-sm col-emphasized">
        <img className='tile-img' src={images[j].img[9]} alt={images[9].ref}/>
    </div>
</div>

Любая помощь будет очень ценится.

Answer 1

Несколько способов сделать это

function parseImages(){
    const length = images.length
    const res = []
    for(let i = 0; i < length; i += 3){
        let temp = []
        if(images[i]){
            temp.push(images[i])
        }
        if(images[i+1]){
            temp.push(images[i+1])
        }
        if(images[i+2]){
            temp.push(images[i+2])
        }
        if(temp.length > 0){
            res.push(temp)
        }
    }
    return res
}
function renderImages(){
    const parsed = parseImages()
    return parsed.map(set => <ImageRow set={set}/>)
};
const ImageRow = ({set}) => (
    <div className="row row-emphasized">
        {set.map(image => {
            if(typeof image !== 'undefined'){
                return (
                    <div id='blank-col' className="col col-sm col-emphasized">
                        <img className='tile-img' src={image.img} alt={image.ref}/>
                    </div>
                )
            }
        })}
    </div>
)

Answer 2

Вы можете сначала разбить массив на более мелкие куски, а затем просто отобразить массивы

const chunk = (array, size) => {
  const chunks = [];
  for (let i = 0; i < array.length / size; i++) {
    chunks.push(array.slice(i * size, (i + 1) * size));
  }
  return chunks;
};

function renderImages() {
  const groupedImages = chunk(images, 3);

  return groupedImages.map(group => (
    <div className="row row-emphasized">
      {group.map(image => (
        <div id="blank-col" className="col col-sm col-emphasized">
          <img className="tile-img" src={image.img[0]} alt={image.ref} />
        </div>
      ))}
    </div>
  ));
}