Как поместить различный контент для каждой карты

Убедитесь, что вы обновляете правильный массив cards. Также используйте массив объектов, где у каждого объекта есть ключ для ссылки на изображение и один для описания. В .map() мы будем использовать эти значения для рендеринга контента. Вот рабочая песочница: https://codesandbox.io/s/material-demo-3v44c

Отзывчивость будет работать, как и ожидалось.

Рабочий код:

import React from "react";
import AppBar from "@material-ui/core/AppBar";
import Button from "@material-ui/core/Button";
import CameraIcon from "@material-ui/icons/PhotoCamera";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import CardMedia from "@material-ui/core/CardMedia";
import CssBaseline from "@material-ui/core/CssBaseline";
import Grid from "@material-ui/core/Grid";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import Link from "@material-ui/core/Link";

function MadeWithLove() {
  return (
    <Typography variant = "body2" color = "textSecondary" align = "center">
      {"Built with love by the "}
      <Link color = "inherit" href = "https://material-ui.com/">
        Material-UI
      </Link>
      {" team."}
    </Typography>
  );
}
const useStyles = makeStyles(theme => ({
  icon: {
    marginRight: theme.spacing(2)
  },
  heroContent: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(8, 0, 6)
  },
  heroButtons: {
    marginTop: theme.spacing(4)
  },
  cardGrid: {
    paddingTop: theme.spacing(8),
    paddingBottom: theme.spacing(8)
  },
  card: {
    height: "100%",
    display: "flex",
    flexDirection: "column"
  },
  cardMedia: {
    paddingTop: "56.25%" // 16:9
  },
  cardContent: {
    flexGrow: 1
  },
  footer: {
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(6)
  }
}));

const cards = [
  {
    img:
      "https://images.unsplash.com/photo-1564135624576-c5c88640f235?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80",
    desc: "Campsite"
  },
  {
    img:
      "https://images.unsplash.com/photo-1564198879220-63f2734f7cec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2072&q=80",
    desc: "Space"
  }
];

export default function Album() {
  const classes = useStyles();

  return (
    <React.Fragment>
      <CssBaseline />
      <AppBar position = "relative">
        <Toolbar>
          <CameraIcon className = {classes.icon} />
          <Typography variant = "h6" color = "inherit" noWrap>
            Album layout
          </Typography>
        </Toolbar>
      </AppBar>
      <main>
        {/* Hero unit */}
        <div className = {classes.heroContent}>
          <Container maxWidth = "sm">
            <Typography
              component = "h1"
              variant = "h2"
              align = "center"
              color = "textPrimary"
              gutterBottom
            >
              Album layout
            </Typography>
            <Typography
              variant = "h5"
              align = "center"
              color = "textSecondary"
              paragraph
            >
              Something short and leading about the collection below—its
              contents, the creator, etc. Make it short and sweet, but not too
              short so folks don&apos;t simply skip over it entirely.
            </Typography>
            <div className = {classes.heroButtons}>
              <Grid container spacing = {2} justify = "center">
                <Grid item>
                  <Button variant = "contained" color = "primary">
                    Main call to action
                  </Button>
                </Grid>
                <Grid item>
                  <Button variant = "outlined" color = "primary">
                    Secondary action
                  </Button>
                </Grid>
              </Grid>
            </div>
          </Container>
        </div>
        <Container className = {classes.cardGrid} maxWidth = "md">
          {/* End hero unit */}
          <Grid container spacing = {4}>
            {cards.map(card => (
              <Grid item key = {card} xs = {12} sm = {6} md = {4}>
                <Card className = {classes.card}>
                  <CardMedia
                    className = {classes.cardMedia}
                    image = {card.img}
                    title = "Image title"
                  />
                  <CardContent className = {classes.cardContent}>
                    <Typography gutterBottom variant = "h5" component = "h2">
                      Heading
                    </Typography>
                    <Typography>{card.desc}</Typography>
                  </CardContent>
                  <CardActions>
                    <Button size = "small" color = "primary">
                      View
                    </Button>
                    <Button size = "small" color = "primary">
                      Edit
                    </Button>
                  </CardActions>
                </Card>
              </Grid>
            ))}
          </Grid>
        </Container>
      </main>
      {/* Footer */}
      <footer className = {classes.footer}>
        <Typography variant = "h6" align = "center" gutterBottom>
          Footer
        </Typography>
        <Typography
          variant = "subtitle1"
          align = "center"
          color = "textSecondary"
          component = "p"
        >
          Something here to give the footer a purpose!
        </Typography>
        <MadeWithLove />
      </footer>
      {/* End footer */}
    </React.Fragment>
  );
}