Unable to display a Component as Grid View in React.js - html

Question

import React from "react";
import { useSelector } from "react-redux";
import { selectData } from "../features/dataSlice";
import ProductCard from "./ProductCard";
import { Grid } from "#material-ui/core";
import styled from "styled-components";
import style from "../style.css";
function Product() {
const products = useSelector(selectData);
const renderproducts = products.map((product) => {
//const { id, title, price, description, category, image, rating } = product;
return <ProductCard data={product} />;
});
return (
<Container>
<div>{renderproducts}</div>
</Container>
);
}
export default Product;
const Container = styled.div`
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
`;
-------------------------------------
import React from "react";
import Product from "./Product";
import styled from "styled-components";
import { Grid } from "#material-ui/core";
function ProductCard(props) {
const { data } = props;
return (
<Container>
<img src={data.image} />
</Container>
);
}
export default ProductCard;
const Container = styled.div`
padding-top: 60px;
img {
width: 100px;
height: 100px;
}
`;
const Card = styled.div`
img {
width: 60px;
height: 60px;
}
`;
I need to display all the images from the products array which Iam fetching from an API as Grid View. Above is the code for the ProductCard.js & Product.js components. I have tried to add the grid view styling in the ProductCard component also. But it just does'nt display as Grid. Please help me.

Answer 1

You can use grid-like.
<Grid container spacing={2}>
{products.map((p,i)=>( <Grid key={i} item xs={8}>
< ProductCard/>
</Grid>)
}
</Grid>
</Grid>
for more details, you can check https://mui.com/components/grid/