2

Estoy creando una app en la que necesito llenar una array de forma dinámica con elementos seleccionados mediante un checkBox, sin embrago al realizarlo agrega el primer elemento y al seleccionar otro lo único que sucede es que se reemplaza y sigue habiendo solo un item.

const Product = ({doc, type, type_card}) => { 
    const [list, setList] = useState([])

    useEffect(() => {
        console.log('List', list)
    }, [list])

    return (
        <Container type={type}>
            <div>
                <p>{doc.product_code}</p>
            </div>
            <div>
                {type_card ? 
                    <button>Editar</button>
                :
                    <button>Ver Producto</button>
                }
            </div>
            <div>
                {type_card ? 
                    <button onClick={() => deleteProduct(doc.id, doc.ref)} >Eliminar</button>
                :
                    <div>
                        // Añadir elementos al arreglo
                        Add
                        <input 
                            type="checkbox"
                            id={`${doc.id}`} 
                            onChange={e => {
                                if (e.target.checked) {
                                    setList([...list, {
                                        product_code: doc.product_code,
                                        id: doc.id
                                    }])
                                } 
                            }} />
                        
                        <label htmlFor={`${doc.id}`}>
                            <div></div>
                        </label>
                    </div>
                }
            </div>
        </Container>
    );
}

export default Product;

Me gustaría saber cómo puedo efectuar dicha acción de forma correcta. Muchas gracias.

1 respuesta 1

2

No sé si es lo que estás buscando, pero intentaré darte una solución.

Le hice varias modificaciones a tu código para que no dependa de props que le lleguen desde algún componente padre, para así poder hacerte una demostración mediante CodeSandbox.

import React, { useEffect, useState } from "react";

const Product = ({ type_card }) => {
  const [list, setList] = useState([]);
  const [doc, setDoc] = useState({
    id: "dsfds",
    ref: "dsfs",
    product_code: "sdfsd"
  });

  useEffect(() => {
    console.log("List", list);
  }, [list]);

  return (
    <div>
      <div>
        <p>{doc.product_code}</p>
      </div>
      <div>
        {type_card ? <button>Editar</button> : <button>Ver Producto</button>}
      </div>
      <div>
        {type_card ? (
          <button onClick={() => deleteProduct(doc.id, doc.ref)}>
            Eliminar
          </button>
        ) : (
          <div>
            Añadir elementos al arreglo
            <input
              type="checkbox"
              id={`${doc.id}`}
              onChange={(e) => {
                if (e.target.checked) {
                  let newList = list;
                  newList.push({
                    product_code: doc.product_code,
                    id: doc.id
                  });
                  console.log(newList);
                  setList(newList);
                }
              }}
            />
            <label htmlFor={`${doc.id}`}>
              <div></div>
            </label>
          </div>
        )}
      </div>
    </div>
  );
};

export default Product;

Edit new

Básicamente, lo más importante de este código es la manera en la que ingreso los datos al array list.

onChange={(e) => {
                if (e.target.checked) {
                  let newList = list;
                  newList.push({
                    product_code: doc.product_code,
                    id: doc.id
                  });
                  console.log(newList);
                  setList(newList);
                }
              }}

Fijate que en el evento onChange del checkbox, por cada vez que le hago click se agrega el JSON al estado list, como se puede observar en los console.log().

Para lograrlo, primero creo un nuevo objeto llamado newList en donde guardo el valor actual del estado list. Luego le hago un .push ingresandole el objeto que deseo sumar a mis datos anteriores. Y finalmente los guardo actualizando el estado con el setList().

De esta manera puedo acumular en mi array todos los datos que deseo guardar.

Obviamente, esto es solo una demostración en la que por supuesto no nos va a servir de mucho guardar siempre el mismo dato. Pero en casos practicos podrías renderizar una serie de objetos guardados en un array mediante un .map y habilitar cada checkbox para que al tocarlos se vayan guardando los datos seleccionados.

Espero haberte ayudado o al menos acercarte a la solución que estabas buscando.

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.