Conditional rendering through multidimensional loop with array

Question

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

Sorry I was just make it more clear on the images and It's my latest edit — Billy
– Billy, Commented May 9, 2019 at 5:27
I understood. I did made it better again. Don't worry. Check out my answer... 😇 — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented May 9, 2019 at 5:28

Praveen Kumar Purushothaman · Accepted Answer · 2019-05-09 05:36:05Z

3

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

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.

edited May 9, 2019 at 5:36

answered May 9, 2019 at 5:09

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Billy Over a year ago

What do you mean by 4n? I still don't understand sorry

Praveen Kumar Purushothaman Over a year ago

@Billy 4n is because you have 4 columns and n gets incremented each time. In your first column, you have image 1 and image 5. In your second column, you have image 2 and image 6 and so on. So if you replace n with 0 and 1 for now, what you get is Image 1 and Image 5 for n = 1 and Image 2 and Image 6 for n = 2. If you didn't understand this explanation, I am happy to write more in the answer. 😇

Billy Over a year ago

Excellent answer Praveen! :) . Thank u so much for making the solution for me 😇. I'll surely will learn and understand the code and explanation you gave! 😇

Praveen Kumar Purushothaman Over a year ago

@Billy Anytime mate. Let me know if you need more help. I am a React JS mentor and I would love to help you with learning React! 😇

Collectives™ on Stack Overflow

Conditional rendering through multidimensional loop with array

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related