Estoy intentando eliminar un objeto de un array almacenado en localStorage con localStorage.removeItem()
. He intentado realizar dicha acción de la siguiente forma:
Principalmente al añadir un ítem, tomo su id y lo envío a la función deleteProduct()
, donde realiza un mapeo de los productos y retorna el objeto que incluye el id especificado, para posteriormente eliminarlo.
const Cart = () => {
const [products, setProducts] = useState([]);
const [item, setItem] = useState();
useEffect(() => {
setProducts(JSON.parse(localStorage.getItem('data')))
}, [])
const deleteProduct = (id) => {
products.map((product) => {
if(products.includes(id)) {
return product
}
setItem(product)
console.log(item)
localStorage.removeItem('data', item)
})
}
return (
<>
<Container type={'min'}>
<SVGContainer way={'way1'}>
<Way1 />
</SVGContainer>
<Header />
<SubContainer type={'min'}>
<h1>Shopping Cart</h1>
</SubContainer>
</Container>
<ContainerAll>
<ProductsList>
{products.length > 0 && products.map((product) => {
return(
<Item key={product.id}>
<div>
{/* <img src={product.picture} alt=""/> */}
</div>
<div>
<h2>{product.name}</h2>
<p>{product.description}</p>
</div>
<div>
<p>Min price: ${product.minPrice}</p>
<p>Max price: ${product.maxPrice}</p>
<button onClick={() => deleteProduct(product.id)}>Delete</button>
</div>
</Item>
)
})
}
</ProductsList>
</ContainerAll>
</>
);
}
export default Cart;