Puedes lograrlo creando un estado separado para cada producto en lugar de un único estado para todos. Puedes utilizar un objeto donde las claves sean los IDs de los productos y los valores sean las cantidades correspondientes. Aquí hay un ejemplo en React:
import React, { useState } from 'react';
const ProductList = () => {
// Estado para almacenar las cantidades de cada producto
const [quantities, setQuantities] = useState({});
// Función para manejar cambios en la cantidad de un producto específico
const handleQuantityChange = (productId, newQuantity) => {
setQuantities((prevQuantities) => ({
...prevQuantities,
[productId]: newQuantity,
}));
};
// Función para renderizar la lista de productos
const renderProductList = () => {
// Supongamos que products es un array de objetos con información de los productos
const products = [
{ id: 1, name: 'Producto 1', price: 10 },
{ id: 2, name: 'Producto 2', price: 20 },
// ... otros productos
];
return products.map((product) => (
<div key={product.id}>
<span>{product.name}</span>
<input
type="number"
value={quantities[product.id] || 0}
onChange={(e) => handleQuantityChange(product.id, parseInt(e.target.value, 10))}
/>
<span>Subtotal: {quantities[product.id] * product.price || 0}</span>
</div>
));
};
return <div>{renderProductList()}</div>;
};
export default ProductList;
Este ejemplo utiliza un objeto quantities para almacenar las cantidades de cada producto según su ID. La función handleQuantityChange actualiza el estado de las cantidades solo para el producto específico al que se le cambió la cantidad. Esto debería resolver tu problema de mantener valores independientes para cada producto.