Tengo un estado con dos productos como este:
const [product, setProduct] = useState([ { name: 'Hat', description: 'Nice cartoon hat', images: [ 'linktoimage', ], amount: 799, currency: 'eur', quantity: 0, }, { name: 'Gift', description: 'Nice cartoon gift', images: [ 'linktoimage', ], amount: 599, currency: 'eur', quantity: 0, }, ]);Quiero mostrarlos, así que uso un mapeo regular:
<div className='product'> {product.map((p) => ( <div> <h3>{p.name}</h3> <h4> Stripe Amount:{' '} {(p.amount / 100).toLocaleString('en-US', { style: 'currency', currency: 'EUR', })} </h4> <img src={p.images[0]} width='250px' alt='product' /> <span style={{ margin: '20px', fontSize: '2em' }}> {p.quantity} </span> <button className='btn btn-sm btn-success' onClick={() => { setProduct([...p, (p.quantity = Math.max(0, p.quantity + 1))]); }} > + </button> </div> ))}Tengo dificultades para cambiar la cantidad (mi último botón), todo lo que quiero es cambiar la cantidad de productos, pero no puedo hacerlo de alguna manera.
probado así:
onClick={() => {setProduct([...p, (p.quantity = Math.max(0, p.quantity + 1))]); }}dice que p no es iterable, hice otra cosa pero cuando incrementé mi otro producto desapareció, supongo que es porque configuré productState en ...p.
¿Cómo puedo incrementar el producto p dado sin perder mi otro producto en mi estado?
Sugeriría incrementar la quantity fuera del setProduct y luego establecer el estado:
onClick={() => { let result = [...product]; result = result.map((x) => { x.quantity = Math.max(0, x.quantity + 1); return x; }); setProduct(result); }}p se refiere a un producto individual, mientras que su product estatal se refiere a la lista de todos los productos, por lo que para actualizar un elemento y mantener el resto de la lista igual, primero debe difundir product y luego difundir su artículo específico.
onClick={() => setProduct([...product, {...p, quantity: p.quantity + 1}])}Esta es una forma que puede hacer para actualizar la cantidad de elemento:
... {product.map((p, indx) => ( ... <button className='btn btn-sm btn-success' onClick={() => { const updateProducts = product updateProducts[indx].quantity += 1 setProduct([...updateProducts]) }} > + </button> }} ))