Simplificaré ya que el código es un poco enorme.
Mis pizzas tienen arreglos por tamaño y precio. Cuando el usuario selecciona el tamaño, quiero actualizar el precio, el problema es que las pizzas están mapeadas desde el carrito... una lluvia de ideas durante medio día y se atasca. por favor ayuda.
{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> ))}mi identificadorCambiar
const handleChange = (e) =>{ console.log(e.target.value) }Obtuve el precio de una pizza específica.
en la base de datos tengo size:[small,normal,big] también por precio price:[2,3,4]
en el primer render todo está bien. ¿Quizás para crear algún mapa?
por ahora tengo esta solución:
const handleChange = (e) =>{ const target=e.target.value.split(",") document.getElementById(target[1]).innerText = '€'+target[0] }y luego en 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> ))}`¿alguien puede proporcionar una mejor solución?