Untitled
unknown
plain_text
a year ago
1.3 kB
3
Indexable
// ProductPage.js import React, { useState, useEffect } from 'react'; import axios from 'axios'; import './ProductPage.css'; const ProductPage = () => { const [products, setProducts] = useState([]); useEffect(() => { axios.get('https://api.example.com/products') .then(response => setProducts(response.data)) .catch(error => console.error('Error fetching products:', error)); }, []); return ( <div className="product-container"> <h1>Products</h1> <div className="product-list"> {products.map(product => ( <div key={product.id} className="product-card"> <img src={product.image} alt={product.name} /> <h3>{product.name}</h3> <p>{product.description}</p> <p>Price: ${product.price}</p> </div> ))} </div> </div> ); }; export default ProductPage; /* ProductPage.css */ .product-container { max-width: 800px; margin: 0 auto; padding: 20px; } .product-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 20px; } .product-card { border: 1px solid #ccc; padding: 10px; } .product-card img { max-width: 100%; height: auto; } .product-card h3 { margin-top: 0; } .product-card p { margin-bottom: 5px; }
Editor is loading...
Leave a Comment