When I’m trying to update state in react application, I’m getting undefined as a result. I’m basically trying to remove an item from a list component, and trying to update the state, by getting the previous state. But when I try to remove the item, I’m getting undefined.
Now, I have this code:
const Checkout = () => {
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
const [finalPrice, setFinalPrice] = useState(0);
const { basketItems, setBasketItems } = useContext(ProductTypeContext);
useEffect(() => {
basketItems &&
basketItems.forEach((id) => {
axios
.get(`http://localhost:6969/api/products/${id}`)
.then((data) => {
setProducts((prevState) => [...prevState, data.data.product]);
setFinalPrice((prevState) => Number(prevState) + Number(data.data.product.price));
setTimeout(() => {
setLoading(false);
}, 300);
})
.catch((err) => console.log(err));
});
}, []);
if (loading) {
return <div>Loading...</div>;
}
return (
<>
<div className="checkout-container">
{products.map((product, index) => (
<div key={index} className="checkout-products">
<img src={product.img} width="100px" />
<div>{product.name}</div>
<div>{product.price}</div>
<div>{product.taste}</div>
<span
onClick={() => {
setBasketItems((prevState) => {
[...prevState, prevState.splice(index, 1)];
});
}}
>
X
</span>
</div>
))}
</div>
<div>Final Price: {finalPrice}</div>
</>
);
};
export default Checkout;
And I guess something is wrong when I click the X button, that is updating the state. Any sugesstions?
2
Answers
The approach I’d use to handle this is to use the
filter
method instead ofsplice
.I’ll create a function called
removeProduct
with a paramproductId
and then filter out that ID from the array.// Note: You will have to adjust the code if the project doesn’t have an ID. You will have to pass in a unique field and adjust it
I’ll also pass the function to the
onClick
of theX
button.Using
setTimeout
is not efficient in this usecase.Here’s the complete code
The splice method returns the removed elements, not the modified array.
Update this part:
Note that: In your code, Final Price only updates when fetching data. You can create a function to calculate the final price based on the current products array and call it when removing an item.
Update Final Price Function:
Use this function on our updated code: