Creating dividers in every three rows from an array of cards

Question

Hello guys, I'm trying to create a Divider for every row of 3 items This is my current setup, but the issue is I'm handling only two sets of rows, and there can be an unlimited amount of rows I'm using slice to get the first two rows

The divider can't be inside a map since it needs to be placed outside the container. The divider need to be placed between every two rows. It currently only handles two rows, but it needs to take more than two rows.

Example codepen https://codesandbox.io/s/summer-firefly-xzymsp?file=/src/App.tsx

Answer 1

You could try to prepare your OpenGraphGridDate and arrange it in rows. this way it is easy to use two nested map function.

const OpenGraphGridModule = () => {
  const rows = OpenGraphGridData.reduce((rows,el)=> {
    if(rows[rows.length-1].length >= 3){
      rows.push([]);
    }
    rows[rows.length-1].push(el);
    return rows;
  },[[]]);

  return (
    <>
      {rows.map((row,i) => 
        (
          <>
            <Container>
            {row.map(el => (
              <Card />
            ))}
            </Container>
            {(i < rows.length-1) ? (
              <DividerContainer>
                <Divider />
              </DividerContainer>
            ) : null}
            
          </>
        )
      )}
    </>
  )