Having a loop to change the style of a card after every interval

Question

Currently I have a container that holds my images in a particular pattern where the 1st and 6th card are horizontally elongated and cards 2 to 5 are vertically elongated. As of now all these images are hardcoded, but I want to have a .map function that will take the data from my backend. But the problem is .map takes 1 layout and duplicates it, but I want it to follow my particular pattern for which I assume I would need a loop.

CodeSandbox: https://codesandbox.io/s/gallant-forest-vygnw?file=/src/App.js

Code:

<div className="container">
        <div className="row">
          {/* {posts &&
            posts.map((item) => ( */}
          <div className="col-md-6 col-sm-6">
            <div className="row">
              <div className="col-md-12">
                <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
              </div>
            </div>
            <div className="row">
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
            </div>
          </div>
          <div className="col-md-6 col-sm-6">
            <div className="row">
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
              <div className="col-md-6 col-sm-6">
                <img
                  style={{ minHeight: "280px", objectFit: "cover" }}
                  src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg"
                />
              </div>
            </div>
            <div className="row">
              <div className="col-md-12">
                <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
              </div>
            </div>
          </div>
          {/* ))} */}
        </div>
      </div>

Answer 1

I'm not use to help on this site but i maybe have an answer for you.

It seems your 'posts' only have 3 items so mapping on this wont make you have the 6 images you need. Whatever, you said the datas have to come frome your backend so i presume it's just some testing data.

I suggest you to use .map normally but define the differences with CSS. Then you can easily select the first and the last element of your mapping with something like that :

container div:first-child div:first-child, container div:last-child div:last-child{
  //your css
}

But as you using bootsrap for styling, you need to translate the bootstrap classes for this method. I suggest you an other. The .map function can get an index as second argument. So you can do something like this :

posts.map(element, i => {yourcode} )

Then use the index for knowing if it is the first or the last item in a ternary expression :

i === 0 || i === posts.length ? your code for the first and last : normal code for the others

EDIT: I've try in the sandbox, it seems the problem with your patern is that every elements are not independents. The div element who appears every 3 items screw up everything for using map. My best result was this :

return (
    <div className="App">
      <div className="container">
        <div className="row">
          
            {posts &&
            posts.map((item, i) => {  
              return (i+1)%4 === 0 || i===0 ?
          (
            <div className="col-md-6 col-sm-6">
              <div className="row">
          <div className={ i === 0 || i === (posts.length-1) ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
          </div>
        </div>
            </div>
          )
            : 
          (
            <div className="row">
          <div className={ i === 0 || i === (posts.length-1) ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img src="https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg" />
          </div>
        </div>)
          
         })} 
          
          
        </div>
      </div>
    </div>
  );

But i can't figuring out how handle this parent div for encapsulating every 3 element. Here a suggestion that i've not trying yet :

1. Create a component who will mapping inside the problematic div.
2. Find a way to create a 2D Array with your request, each Array in this one composed by 3 elements
3. Mapping the 2D Array using your component.

The first mapping will map over each Array in your 2D array and the second map, inside your component, will map over the elements.

Answer 2

try using index in map to customize how you want it.

posts.map((item, idx) => (
          <div className={idx === 0 ? "col-md-12" : "col-md-6 col-sm-6"}>
            <img
              src={item?.src}
              alt={item?.caption}
              style={{ minHeight: "280px", objectFit: "cover" }}
            />
          </div>

Codesandbox https://codesandbox.io/s/sad-shannon-wkc28?file=/src/App.js