cuando doy click al boton de eliminar no hace nada y quiero que se elimine por completo ese producto, como podria ser? ayuda
este es mi codigo:
import axios from "axios"
const API_URL = import.meta.env.VITE_API_URL;
const getProducts = async () => {
try {
const response = await axios.get(API_URL + "/api/products")
return response.data
} catch (error) {
throw error
}
}
const addProduct = async (newProduct) => {
try {
const response = await axios.post(API_URL + "/api/products", newProduct)
return response.data
} catch (error) {
throw error
}
}
const deleteProduct = async (productId) => {
try {
await axios.delete(API_URL + `/api/products/${productId}`)
} catch (error) {
throw error
}
}
export { getProducts, addProduct, deleteProduct }
import { useEffect, useState } from 'react'
import { addProduct, getProducts, deleteProduct } from './services/api.js'
import { AddProduct } from "./components/AddProduct.jsx"
import { ProductList } from "./components/ProductList.jsx"
function App() {
const [products, setProduct] = useState([]);
const fetchProducts = async () => {
try {
const data = await getProducts();
setProduct(data);
} catch (error) {
console.error("Error al consumir los productos:", error.message);
}
};
useEffect(() => {
fetchProducts();
}, []);
const handleAddProduct = async (newProduct) => {
try {
const addedProduct = await addProduct(newProduct);
setProduct((prevProducts) => [...prevProducts, addedProduct]);
} catch (error) {
console.error("Error al guardar el producto :(");
}
};
const handleDeleteProduct = async (productId) => {
try {
await deleteProduct(productId);
setProduct((prevProducts) =>
prevProducts.filter((product) => product.id !== productId)
);
} catch (error) {
console.error("Error al eliminar el producto :(", error.message);
}
};
return (
<>
<div
className="container is-flex is-justify-content-center is-align-items-center"
style={{ height: "300vh" }}
>
<div>
<h1 className="title is-1 has-text-centered mb-6">Lista de productos</h1>
<AddProduct handleAddProduct={handleAddProduct} />
<ProductList
products={products}
handleDeleteProduct={handleDeleteProduct}
/>
</div>
</div>
</>
);
}
export default App;
import React from "react";
import "../components/ProductList.css";
const ProductList = ({ products, handleDeleteProduct }) => {
return (
<div className="container">
<div className="columns is-multiline">
{products.map((product, index) => (
<div key={index} className="column is-one-third mt-6">
<div className="card">
<div className="card-image">
<figure className="image is-4by3">
<img src="/public/imgproducts.jpg" alt={product.name} />
</figure>
</div>
{/* Contenido del producto */}
<div className="card-content">
<p className="title">{product.name}</p>
<p className="subtitle mt-5 has-text-danger-light">
{product.description}
</p>
<div className="content">
<strong className="has-text-success">Price:</strong>{" "}
<strong className="has-text-white">${product.price}</strong>
<br />
<strong className="has-text-warning">Stock:</strong>{" "}
<strong className="has-text-white">
{product.stock} disponible
</strong>
</div>
</div>
<footer className="card-footer">
<button
className="button is-danger card-footer-item"
onClick={() => handleDeleteProduct(product.id)}
>
Eliminar
</button>
<button className="button is-primary card-footer-item">Editar</button>
</footer>
</div>
</div>
))}
</div>
</div>
);
};
export { ProductList };