show two row and four items per row

Question

I want to show 4 items per row. I have a markup like below. Depending on that markup i need to show four items in a single row. for example, If i have 8 data then there will be two row and each row consists 4 items.

If i loop outside <Grid gutters col="cols-4"> then there will be eight such elements and if i loop inside that element then there will be eight Cell element. How can this case be handled?

Here is the markup

const data = [
    {id: 1, header: 'header', content: 'content', footer: 'footer'},
    {id: 2, header: 'header', content: 'content', footer: 'footer'},
    {id: 3, header: 'header', content: 'content', footer: 'footer'},
    {id: 4, header: 'header', content: 'content', footer: 'footer'},
    {id: 5, header: 'header', content: 'content', footer: 'footer'},
    {id: 6, head/xer: 'header', content: 'content', footer: 'footer'},
    {id: 7, header: 'header', content: 'content', footer: 'footer'},
    {id: 8, header: 'header', content: 'content', footer: 'footer'},
]

<Grid gutters col="cols-4">
    <Grid.Cell key={datum.id}>
        <Card>
            <Card.Header>{datum.header}</Card.Header>
            <Card.Content>{datum.content}</Card.Content>
            <Card.Footer>{datum.footer}</Card.Footer>
        </Card>
    </Grid.Cell>
    <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
</Grid>
<Grid gutters col="cols-4">
    <Grid.Cell key={datum.id}>
        <Card>
            <Card.Header>{datum.header}</Card.Header>
            <Card.Content>{datum.content}</Card.Content>
            <Card.Footer>{datum.footer}</Card.Footer>
        </Card>
    </Grid.Cell>
    <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
     <Grid.Cell>
    </Grid.Cell>
</Grid>

Answer 1

To begin with, go about splitting the data in to chunks for each row. Try this:

let chunks = [];
const columns = 4;
while (data.length > 0) {
    chunks.push(data.splice(0, columns));
}

That will remove the entries from the data array in lengths of 4 and place them in to a multidimensional array which will look like this:

[  
   [  
      {  
         "id":1,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":2,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":3,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":4,
         "header":"header",
         "content":"content",
         "footer":"footer"
      }
   ],
   [  
      {  
         "id":5,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":6,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":7,
         "header":"header",
         "content":"content",
         "footer":"footer"
      },
      {  
         "id":8,
         "header":"header",
         "content":"content",
         "footer":"footer"
      }
   ]

Then you can go about looping through each of the arrays to dump out the markup.

chunks.forEach(row => {
  return (
    <Grid gutters col="cols-4">
    {
      row.forEach(col => ({
         <Grid.Cell key={col.id}>
             <Card>
                 <Card.Header>{col.header}</Card.Header>
                 <Card.Content>{col.content}</Card.Content>
                 <Card.Footer>{col.footer}</Card.Footer>
             </Card>
         </Grid.Cell>
      }));
    }
    </Grid>
  )
});

The markup here is pseudo code and not properly tested but hopefully you get the idea.

Answer 2

Create a parent div having col span as 4 and then inside that loop on the data array and create cell component with col span as 1.