0

Estoy haciendo un buscador que muestra una tabla con todos los productos disponibles de una tienda inicialmente y luego va filtrando sengún le vaya indicando el comprador, cada producto posee un contador para introducir la cantidad deseada de cada producto, el problema está en que este valor no es dinámico, al estar dentro de un map cuando aumento o resto la cantidad esta se cambia en todos los productos por igual.

Básicamente utilicé un useState para guardar el valor de ese input tipo number, para luego ese valor multiplicarlo por el precio del producto y poder añadirlo al carrito con su sub-total.

Cómo puedo hacer para cambiar el valor de cantidad de un producto en específico sin afectar los demás?

2
  • Bienvenido. Si no muestras el código no podemos ayudarte. Mira cómo crear un ejemplo mínimo verificable.
    – Mateo
    Commented el 6 mar. a las 16:56
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 6 mar. a las 20:39

1 respuesta 1

0

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.

2
  • Sugiero actualizar la respuesta describiendo lo que se hizo en setQuantities dentro de handleQuantityChange
    – g.4
    Commented el 6 mar. a las 18:31
  • Muchas gracias Liam, funcionó perfecto! Solo me queda una duda que olvidé mencionar en la pregunta, al input yo le quité las flechas que vienen por defecto para sumar o restar porque estoy añadiendo unos botones personalizados que cumplan esa función. Mi pregunta es, si escribo el numero en el input funciona perfectamente pero cómo podría hacer para que los nuevos botones de + y - cumplan esa función? Muchas gracias de antemano! Commented el 8 mar. a las 23:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.