How to add a div in map every 4 iterations?-CodePudding

I want to add the div below every 4 iterations.

<div className="clearBoth"></div>

How to accomplish this?

        {portfolio?.map((portf, index) => (
          
            <Item
                original={require('../img/'   folder   '/'  
                portf.src)}
                thumbnail={require('../img/'   folder   '/'  
                portf.src)}
                >
                {({ ref, open }) => (
                    <img ref={ref} onClick={open} src={require('../img/'   folder   '/'  
                    portf.src)} className={'associatedMedia'   index } />
                )}
            </Item>

        ))}

CodePudding user response：

Assuming that <div> is to be added after every 4 Item, perhaps try:

// React might need to be imported

{
  portfolio?.map((portf, index) => (
    <React.Fragment key={index}>
      <Item
        original={require("../img/"   folder   "/"   portf.src)}
        thumbnail={require("../img/"   folder   "/"   portf.src)}
      >
        {({ ref, open }) => (
          <img
            ref={ref}
            onClick={open}
            src={require("../img/"   folder   "/"   portf.src)}
            className={"associatedMedia"   index}
          />
        )}
      </Item>
      {index !== 0 && (index   1) % 4 === 0 && (
        <div className="clearBoth"></div>
      )}
    </React.Fragment>
  ))
}

CodePudding user response：

Deleted my previous answer because I don't think you should be adding a <div> here. It looks like you're just trying to break rows into sets of 4 (or something similar), and it's better to do that with CSS.

You could use CSS grid:

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, calc(25% - 8px));
  gap: 8px;
}

.items > * {
  padding: 1rem;
  background: slateblue;
  color: white;
  text-align: center;
}

<ul >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Or CSS flexbox:

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.items > * {
  flex: 0 1 calc(25% - 8px);
  background: slateblue;
  padding: 1em 0;
  color: white;
  text-align: center;
}

<ul >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Or nth-child with ::after, etc. etc.:

(The grid and flexbox solutions will be easier to deal with, but you might have reasons for going this route. Note that you could use nth-child with the suggestions above if you want them to have a different treatment.)

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.items > * {
  padding: 1rem 0;
  background: slateblue;
  color: white;
  text-align: center;
  margin: 8px 8px 8px 8px;
  width: calc(25% - 20px);
  display: inline-block;
}

.items > :nth-child(4n) {
  background: red;
}

.items > :nth-child(4n)::after {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(-90deg,  slateblue, red);
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(22px);
}

<ul >
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>