CODEWITHSUNDEEP
javascripthtmlreactjs
Billy
Billy

Reputation: 95

Conditional rendering through multidimensional loop with array

I have a problem in rendering through loop with multidimensional array. I have 4 div as column and I need to put images (provided in array) on it.

For the explanation you can check on the Images I attach. (below the link)

image link

I've tried a lot of time using my code and ended up stuck on this code.

    let temp=[];

    for(let i=0;i<4;i++){
        temp.push(
          <div className="imagesColumn">
                {
                    this.state.images.map((item,index) => {
                        return(
                           <img key={index} src={item.urlImages} width="100%"/>
                        )   

                    })
                }
          </div>
        )
    }

As you see on my code above, what I want is, the first loop is to make the 4 column div and the second loop is to put in the images.

I've failed to make it happen like in the image I gave, because every image got loop 4 times based on first loop.

How can I do that? Anyone can help and give a code example please

Upvotes: 3

Views: 99

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

What you are currently doing is, you are pushing 6 images in your state to each of your <div>, and HTML / React JS doesn't work this way. What you may do is to do a calculative push for each column. So that, first column contains 4n + 1 image, second column with 4n + 2 image and so on.

This way, we can avoid using a temp variable.

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

Snippet

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. 😇

Here's a demo in CodeSandbox.

Preview

preview

Explanation

The condition is as follows:

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

So, in theory, when we try to loop on the column number, i.e., [1, 2, 3, 4], what we get is:

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)

The other places in the loop will not be rendering as they don't meet the condition.

Upvotes: 3

Related Questions