Условный рендеринг через многомерный цикл с массивом

То, что вы сейчас делаете, это то, что вы отправляете 6 изображений в своем состоянии на каждый из ваших <div>, а HTML/React JS так не работает. Что вы можете сделать, так это выполнить расчетный толчок для каждого столбца. Таким образом, первый столбец содержит 4n + 1 изображение, второй столбец — 4n + 2 изображения и так далее.

Таким образом, мы можем избежать использования переменной temp.

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
  state = {
    images: ["Image 1", "Image 2", "Image 3", "Image 4", "Image 5", "Image 6"]
  };
  render() {
    return (
      <div className = "App">
        {[1, 2, 3, 4].map(n => (
          <div className = "col">
            {this.state.images.map((f, i) =>
              4 * i + n - 1 < this.state.images.length ? (
                <div className = "img">{this.state.images[4 * i + n - 1]}</div>
              ) : (
                ""
              )
            )}
          </div>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Фрагмент

class App extends React.Component {
  state = {
    images: ["Image 1", "Image 2", "Image 3", "Image 4", "Image 5", "Image 6"]
  };
  render() {
    return (
      <div className = "App">
        {[1, 2, 3, 4].map(n => (
          <div className = "col">
            {this.state.images.map((f, i) =>
              4 * i + n - 1 < this.state.images.length ? (
                <div className = "img">{this.state.images[4 * i + n - 1]}</div>
              ) : (
                ""
              )
            )}
          </div>
        ))}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

.App {
  font-family: "Segoe UI";
  line-height: 1;
}
.col {
  float: left;
  width: 25%;
}

.img {
  border: 1px solid #999;
  margin: 10px;
  padding: 5px;
  text-align: center;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id = "root"></div>

Note: You might just need to change it to images. ?

Вот демо в КодПесочница.

Предварительный просмотр

Объяснение

Условие следующее:

4 x imageIndex + columnNumber, where imageIndex is less than length of list of images.

Итак, теоретически, когда мы пытаемся зациклиться на номере столбца, то есть [1, 2, 3, 4], мы получаем следующее:

Col = 1
ImageIndex = 0
Image (4 * i + n - 1 = 0)
ImageIndex = 4
Image (4 * i + n - 1 = 4)

Col = 2
ImageIndex = 1
Image (4 * i + n - 1 = 1)
ImageIndex = 5
Image (4 * i + n - 1 = 5)

Col = 3
ImageIndex = 2
Image (4 * i + n - 1 = 2)

Col = 4
ImageIndex = 3
Image (4 * i + n - 1 = 3)

Другие места в цикле не будут отображаться, поскольку они не соответствуют условию.