Material UI card rendering Issues with dynamic data from GraphQL

Question

I'm having issues with the Card rendering using Material UI in a GRANDstack application I'm building.

When I set the cards up with static data they render as expected:

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid item xs={12} sm={4} lg={4} key={memID}>
          <Card style={{ paddingTop: "5px" }}>
            <CardMedia
              className={classes.cardMedia}
              image={require('../img/historyHead.png')}
              style={{ width: "130px", height: "130px" }}
            />
            <CardContent className={classes.cardContent}>
              <Typography>Hi</Typography>
            </CardContent>
          </Card>
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

However, when I set them up with dynamic data from GraphQL they are rendering vertically as opposed to being in a grid:

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid item xs={12} sm={4} lg={4} key={memID}>
          {data.Mem.map(memID => (
            <Card style={{ padding: "5px" }}>
              <CardMedia
                className={classes.cardMedia}
                image={require('../img/historyHead.png')}
                style={{ width: "130px", height: "130px" }}
              />
              <CardContent className={classes.cardContent}>
                {memID.mem}
                {memID.emoji}
              </CardContent>
            </Card>
          ))}
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

When I add a "row" property to the grid container to try and get them displayed in a grid, it makes them even worse:

  const getMemsCard = (memID) => {
    return (
      <>
        <Grid container direction: "row" item xs={12} sm={4} lg={4} key={memID}>
          {data.Mem.map(memID => (
            <Card style={{ padding: "5px" }}>
              <CardMedia
                className={classes.cardMedia}
                image={require('../img/historyHead.png')}
                style={{ width: "130px", height: "130px" }}
              />
              <CardContent className={classes.cardContent}>
                {memID.mem}
                {memID.emoji}
              </CardContent>
            </Card>
          ))}
        </Grid>
      </>
    );
  };

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >

I would like to get the cards to display like they do with the static data when I have added the dynamic data from GraphQL.

Answer 1

You are using {data.Mem.map(memID => ...)} inside an grid item so that's why it's not rendered as expected. Try this:

const getMemsCard = (memID) => {
  return data.Mem.map(memID => (
    <Grid item xs={12} sm={4} lg={4} key={memID}>
        <Card style={{ padding: "5px" }}>
          <CardMedia
            className={classes.cardMedia}
            image={require('../img/historyHead.png')}
            style={{ width: "130px", height: "130px" }}
          />
          <CardContent className={classes.cardContent}>
            {memID.mem}
            {memID.emoji}
          </CardContent>
        </Card>
    </Grid>
    ))
};

<Grid container spacing={2} className={classes.memsGridContainer} >
  {getMemsCard()}
</Grid >