Necessary imports eg useState, useDispatch
function ItemCard(props) {
const [count, setCount] = useState(0);
const dispatch = useDispatch();
Here I am trying to use a button which triggers this function and increases count, but when I console.log it, it prints the older value. When I send the count to dispatch, the older value also gets passed in.
const addCount = () => {
setCount((prevCount) => prevCount + 1);
console.log(count);
dispatch(
updateCart(
"ADD_TO_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
};
const decreaseCount = () => {
if (count > 0) {
setCount((prevCount) => prevCount - 1);
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
}
};
return (
<div className="card">
<div className="image">
<img src={props.img} alt="cookie" />
</div>
<div className="title">
<h2>{props.name}</h2>
<h2>Rs.{props.price}</h2>
</div>
<p className="detail">{props.detail}</p>
<div className="buttons">
<button onClick={addCount} id="add-to-cart">
+
</button>
<span>{count}</span>
<button onClick={decreaseCount} id="add-to-cart">
-
</button>
</div>
</div>
);
}
export default ItemCard;
setState is async, so you would have to use a local variable or use useEffect to watch when the state is already updated
const decreaseCount = () => {
if (count > 0) {
setCount((prevCount) => prevCount - 1);
}
};
useEffect(() => {
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
count
)
);
}, [count])
or
const decreaseCount = () => {
if (count > 0) {
const localCount = count - 1;
dispatch(
updateCart(
"REMOVE_FROM_CART",
{ id: props.id, name: props.name, price: props.price },
localCount
)
);
setCount((prevCount) => prevCount - 1);
}
};
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments