0
209
ViewsCreating dividers in every three rows from an array of cards
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
·
Juan Pablo Isaza
1 answers
Answer question0
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}
</>
)
)}
</>
)
·
Juan Pablo Isaza
Report
Answer question