useEffect(() => {
fetch("https://fakestoreapi.com/products")
.then(response => response.json())
.then(data => setProducts(data))
.catch(error => console.error("Error fetching products:", error));
}, []);

{products.map(product => (

{product.title}
{product.description}

))}

const [products, setProducts] = useState([]);

const deleteItem = (product) => {
fetch(`https://fakestoreapi.com/products/${product.id}`, {
method: "DELETE"
})
.then(response => response.json())
.then(data => {
console.log("Product deleted successfully:", data);
setProducts(products.filter(p => [p.id](http://p.id/) !== [product.id](http://product.id/)));
})
.catch(error => console.error("Error deleting product:", error));
};

const editItem = (product) => {
navigate("/add-product", { state: { product } });
};

const location = useLocation();
const existingProduct = location.state?.product;

fetch("https://fakestoreapi.com/products", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(product)
})
.then(response => response.json())
.then(data => {
console.log("Product added successfully:", data);
navigate("/");
});

const handleSubmit = (e) => {
e.preventDefault();

const url = existingProduct
? `https://fakestoreapi.com/products/${existingProduct.id}`
: "https://fakestoreapi.com/products";

const method = existingProduct ? "PUT" : "POST";

fetch(url, {
method,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(product)
})
.then(response => response.json())
.then(data => {
console.log(existingProduct ? "Product updated:" : "Product added:", data);
navigate("/");
})
.catch(error => console.error("Error saving product:", error));
};

{existingProduct ? "Update Product" : "Add Product"}