Dzień dobry ,
Mam zagwozdke z wyświetlaniem ceny w aplikacji, więc po dodaniu produktow do koszyka, chce, aby użytkownik miał opcje zmiany ilośći produktu.
Wszystko działa jak powinno, dopóki nie dodam wiekszej ilości rzeczy do koszyka. Po wybraniu ilości danego itemu w innych itemach cena tez sie zmiania i wyświetlają mi sie straszne bzdury. Czy ktoś mógłby naprowadzić mnie na rozwiązanie tego błedu.
function CartItems ( {cart} ) {
const [addPrice, setAddPrice] = useState(0)
const handlePrice = (e) => {
let selectedValue = e.target.value;
let price = cart.map((item) => selectedValue * item.price);
setAddPrice(price);
console.log(addPrice)
}
return (
<div className='cart_item'>
{cart.map((item, id) => (
<div key={id} className='cart_item--item'>
<div className="cart_item--image">
<img
className="cart_item_image--img"
src={item.image}
alt="/"
></img>
</div>
<div className='cart_item--content'>
<h3 className="cart_item--h3">{item.title}</h3>
<select className='item_amount' onChange={handlePrice}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<p className="cart_item--price"> Price: {!addPrice ? item.price : addPrice}
<span>{<BiEuro />}</span></p>
<button>Remove from cart</button>
</div>
</div>
))}
</div>
)
}
export default CartItems