Material UI card rendering Issues with dynamic data from GraphQL - reactjs

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 >