CODEWITHSUNDEEP
reactjsgridmaterial-ui
yaser.barati
yaser.barati

Reputation: 177

How to use Grid inside a map() function in React + Material-UI

I want to use Grid, but I can't in this particular case. I have a component called CardComponent.js

The problem is that I use the map() function, but it's not working with Grid.

import React from "react";

const rows = [
  {
    id: 7,
    email: "[email protected]",
    first_name: "Michael",
    last_name: "Lawson"
  },
  {
    id: 8,
    email: "[email protected]",
    first_name: "Lindsay",
    last_name: "Ferguson"
  },
  {
    id: 9,
    email: "[email protected]",
    first_name: "Michael",
    last_name: "Lawson"
  },
  {
    id: 10,
    email: "[email protected]",
    first_name: "Lindsay",
    last_name: "Ferguson"
  }
];

const ElevatedCardHeader = () =>
  rows.map(row => (
    <Card className={"MuiElevatedCard--01"}>
      <CardHeader
        className={"MuiCardHeader-root"}
        title={row.id}
        subheader={row.email}
        classes={{
          title: "MuiCardHeader-title",
          subheader: "MuiCardHeader-subheader"
        }}
      />
      <CardContent className={"MuiCardContent-root"}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6}>
            <Grid container>
              <Grid container justify="space-evenly">
                <label>first_name:</label>
                <label>{row.first_name}</label>
              </Grid>
            </Grid>
            <Divider light />
          </Grid>

          <Grid item xs={12} sm={6}>
            <Grid container>
              <Grid container justify="space-evenly">
                <label>last_name:</label>
                <label>{row.last_name}</label>
              </Grid>
            </Grid>
            <Divider light />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  ));
export default ElevatedCardHeader;

How can I display 2 cards per row using Grid? Currently, 1 card is displayed in each row. Here you can see my Codesandbox.

Upvotes: 1

Views: 8444

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58533

You are missing the grid container on parent level:

<Grid container>
  {rows.map(row => (
    ...
  ))}
</Grid>

WORKING DEMO :

Edit so-grid-container

Upvotes: 4

Amin Azimi
Amin Azimi

Reputation: 749

const ElevatedCardHeader = () => {
  return(
    <Grid container spacing={2}>
    {
      rows.map(row => (
        <Grid item xs={6}>
          <Card className={"MuiElevatedCard--01"}>
            <CardHeader
              className={"MuiCardHeader-root"}
              title={row.id}
              subheader={row.email}
              classes={{
                title: "MuiCardHeader-title",
                subheader: "MuiCardHeader-subheader"
              }}
            />
            <CardContent className={"MuiCardContent-root"}>
              <Grid container spacing={2}>
                <Grid item xs={12} sm={6}>
                  <Grid container>
                    <Grid container justify="space-evenly">
                      <label>first_name:</label>
                      <label>{row.first_name}</label>
                    </Grid>
                  </Grid>
                  <Divider light />
                </Grid>

                <Grid item xs={12} sm={6}>
                  <Grid container>
                    <Grid container justify="space-evenly">
                      <label>last_name:</label>
                      <label>{row.last_name}</label>
                    </Grid>
                  </Grid>
                  <Divider light />
                </Grid>
              </Grid>
            </CardContent>
          </Card>
        </Grid>
      ))
    }
    </Grid>
  )
}

https://p8og0.csb.app/

Upvotes: 0

Related Questions