QUERY
I have a handful of PNG image files saved in the same folder as my React component and have successfully imported them. Now, I am looking for a best practice method to display all these images - let's assume there are 4 images - within their respective boxes as shown in the example picture below. I want them to be displayed side by side, accompanied by their name and price aligned below each image, similar to Craigslist's gallery view when viewing posts with images.
For instance:
<img src={Logo} alt=“website logo”/><img src={Mogo} alt=“website mogo”/><img src={Jogo} alt=“website jogo”/><img src={Gogo} alt=“website gogo”/>Can I achieve this using
products.map((product, index, image?))...SOURCE CODE
const Product = props => {
const { product, children } = props;
return (
<div className="products">
{product.name} ${product.price}
{children}
</div>
);
};
function App() {
const [products] = useState([
{ name: "Superman Poster", price: 10 },
{ name: "Spider Poster", price: 20 },
{ name: "Bat Poster", price: 30 }
]);
const [cart, setCart] = useState([]);
const addToCart = index => {
setCart(cart.concat(products[index]));
};
const calculatePrice = () => {
return cart.reduce((price, product) => price + product.price, 0);
};
return (
<div className="App">
<h2>Shopping cart example using React Hooks</h2>
<hr />
{products.map((product, index) => (
<Product key={index} product={product}>
<button onClick={() => addToCart(index)}>Add to cart</button>
</Product>
))}
YOUR CART TOTAL: ${calculatePrice()}
{cart.map((product, index) => (
<Product key={index} product={product}>
{" "}
</Product>
))}
</div>
);
}