I will simplify as code is bit huge.
My pizzas has arrays for size and price. When user select size i want to update price, problem is that pizzas are mapping from cart... brainstorming for half a day and stuck. please help.
{cart.products.map((product,index) => (
<Product key={index}>
<ProductDetail>
<Image src={product?.img} />
<Details>
<ProductName>
<b>Pizza:</b> {product?.name}
</ProductName>
<PizzaSelect onChange={handleChange} > //do i need value here?
{product.size.map((size,i)=>(
<FilterSizeOption key={i} value={product.price[i]} >{size}</FilterSizeOption>))}
</PizzaSelect>
</Details>
</ProductDetail>
<PriceDetail>
<ProductPrice>
€{product.price[0]} //problem
</ProductPrice>
<RemoveItemButton onClick={()=>emptyCartByProduct(product)}>delete</RemoveItemButton>
</PriceDetail>
</Product> ))}
my handleChange
const handleChange = (e) =>{
console.log(e.target.value)
}
i did get price for specific pizza.
in database i have size:[small,normal,big]
also for price price:[2,3,4]
on first render all is fine. Maybe to create some map?
for now i have this solution:
const handleChange = (e) =>{
const target=e.target.value.split(",")
document.getElementById(target[1]).innerText = '€'+target[0]
}
and then in render:
{cart.products.map((product,prodi) => (
<Product key={prodi}>
<ProductDetail>
<Image src={product?.img} />
<Details>
<ProductName>
<b>Pizza:</b> {product?.name}
</ProductName>
<FilterSize onChange={handleChange} >
{product.size.map((size,i)=>(
<FilterSizeOption key={i} value={[product.price[i],product._id]} >{size}</FilterSizeOption>))}
</FilterSize>
</Details>
</ProductDetail>
<PriceDetail>
<ProductPrice id={product._id} >
€{product.price[0]}
</ProductPrice>
<RemoveItemButton onClick={()=>emptyCartByProduct(product)}>delete</RemoveItemButton>
</PriceDetail>
</Product> ))}`
can someone provide better solution?