Display my cards in 3 columns using reactjs Material ui - reactjs

Question

I'm trying to retrieve images from an API and display them in a three column grid system. When I retrieved images, they are displayed one beneath each other.
Kindly advised best way to achieve this
import React from "react";
import Display from "./Display";
class App extends React.Component {
constructor() {
super();
this.state = {
loading: true,
image: [],
};
}
async componentDidMount() {
const url = "http://jsonplaceholder.typicode.com/photos?_start=0&_limit=10";
const response = await fetch(url);
const data = await response.json();
this.setState({ image: data, loading: false });
console.log(data);
}
render() {
if (this.state.loading) {
return <div> loading ... </div>;
}
if (!this.state.image.length) {
return <div> didnt get an image</div>;
}
return (
<div>
{this.state.image.map((img) => (
<div>
<div>
{" "}
<Display
showImage={img.url}
showTitle={img.title}
showAlbum={img.albumId}
/>{" "}
</div>
<div key={img.id}>
<ul></ul>
</div>
</div>
))}
</div>
);
}
}
export default App;
function Display(props) {
const classes = useStyles();
return (
<div className={classes.root}>
<Grid container spacing={4}>
<Grid item xs={12} sm={6} md={4}>
<CardActionArea>
<CardMedia
component="img"
alt="Contemplative Reptile"
height="200"
width="200"
img
src={props.showImage}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.showTitle}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Album ID: {props.showAlbum}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Grid>
</Grid>
</div>
);
}
export default Display;
In my App.js I'm able to using the map feature and get all the items from the array, I'm thinking I should modify my App.jS file to print out the results in the three columns but I'm not sure. Can I modify the Display file so that each card goes right beside each other? Do I need to use another array for the cards?

Answer 1

You can add display flex to the parent div in your render method as default flexDirection = 'row'
render() {
if (this.state.loading) {
return <div> loading ... </div>;
}
if (!this.state.image.length) {
return <div> didnt get an image</div>;
}
return (
<div style={{display:"flex"}}> //added display flex
{this.state.image.map((img) => (
<div>
<div>
{" "}
<Display
showImage={img.url}
showTitle={img.title}
showAlbum={img.albumId}
/>{" "}
</div>
<div key={img.id}>
<ul></ul>
</div>
</div>
))}
</div>
);
}