CODEWITHSUNDEEP
reactjsgridmaterial-ui
Peter Slanina
Peter Slanina

Reputation: 226

Rendering material-ui cards dynamically - in a row

I'm trying to create an array of cards however as in the sandbox below , I'm not able to render the cards in a row even if I set grid item to xs={3}. No matter what I do they always render below each other.

Working version : https://codesandbox.io/s/heuristic-edison-mpj94

Added another map to make it 2D :

https://codesandbox.io/s/nifty-poincare-dl0jf?file=/src/App.js

Thanks for any help!

Upvotes: 1

Views: 6287

Answers (1)

Shubham Verma
Shubham Verma

Reputation: 5054

For your desired output i.e 4 cards per row

here is the code:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import {
  Grid,
  Card,
  CardContent,
  Typography,
  CardHeader
} from "@material-ui/core/";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    padding: theme.spacing(2)
  }
}));

export default function AltCard() {
  const classes = useStyles();
  const data = {
    name: [
      { quarter: 1, earnings: 13000 },
      { quarter: 2, earnings: 16500 },
      { quarter: 3, earnings: 14250 },
      { quarter: 4, earnings: 19000 }
    ],
    id: [1, 2, 3, 4]
  };
  return (
    <div className={classes.root}>
      {data.id.map((elem) => (
        <Grid
          container
          spacing={2}
          direction="row"
          justify="flex-start"
          alignItems="flex-start"
        >
          {data.name.map((elem) => (
            <Grid item xs={3} key={data.name.indexOf(elem)}>
              <Card>
                <CardHeader
                  title={`quarter : ${elem.quarter}`}
                  subheader={`earnings : ${elem.earnings}`}
                />
                <CardContent>
                  <Typography variant="h5" gutterBottom>
                    Hello World
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      ))}
    </div>
  );
}

Here is the demo: https://codesandbox.io/s/charming-cookies-ymw7b?file=/src/App.js:0-1369

Upvotes: 2

Related Questions