1

Tengo una lista de check con varios ítems, quiero poder agregar la opción de seleccionar todo y que toda la lista se pueda marcar o desmarcar.

La lista que estoy pintando la recibo de otro componente y la paso como props a este componente donde estoy ejecutando la función.

Este es mi código, donde estuve intentando pero no funciono, no se que estoy haciendo mal. Ayuda por favor.

import React, { useState } from "react";

const Checkbox = ({ state }) => {
  const [select, setSelect] = useState([]);

  const handleChange = (e) => {
    const { name, checked } = e.target;
    if (name === "selectAll") {
      let tempData = state.map((el) => {
        return { ...el, isChecked: checked };
      });
      setSelect(tempData);
    } else {
      let tempData = state.map((el) =>
        el === name ? { ...el, isChecked: checked } : el
      );
      setSelect(tempData);
    }
  };
  //console.log(select);

  return (
    <div>
      <form action="">
        <input
          name="selectAll"
          type="checkbox"
          onChange={handleChange}
          checked={select.filter((el) => el?.isChecked !== true).length < 1}
        />
        <label htmlFor="">Seleccionar Todo</label>
        {state.map((el, i) => {
          return (
            <div key={i}>
              <input
                name={el}
                checked={el?.isChecked || false}
                type="checkbox"
                value={el}
                onChange={handleChange}
              />
              <label htmlFor="">{el}</label>
            </div>
          );
        })}
      </form>
    </div>
  );
};

export default Checkbox;
1
  • Tu problema es que estás asignando el valor a select en lugar de a tu props state el cual usas para renderizar tus input. Debes crear un handleChange en el componente que envía state y realizar las modificaciones ahí o... pintar select inicializandolo con el valor de state, con eso te debería funcionar, pero si necesitas esos resultados igual necesitarás una función en tu otro componente que afecte al origen de state. Commented el 23 nov. 2022 a las 22:20

1 respuesta 1

0

Espero que te sirva, yo lo realice de esta manera:

import React, { useState } from "react";

const Checkbox = ({ state }) => {
    const state = ["uno", "dos", "tres"];

    const initialState = {
        uno: false,
        dos: false,
        tres: false
    };

    const [select, setSelect] = useState([]);
    const [checkedAll, setCheckedAll] = useState(false);
    const [change, setChange] = useState(initialState);

    // Evalúa que state change sea diferente a true 
    // para que vuelva a la posición inicial state checkedAll
    useEffect(() => {
        if (!Object.values(change).includes(true)) {
            setCheckedAll(false);
        }
    }, [change, setCheckedAll]);


    const handleChange = ({ target }) => {
        const v = target.value;
        // Evalúa si el state select incluye valor seleccionado 
        // envía todos los diferente a ese valor 
        // si no lo agrega
        if (select.includes(v)) {
            setSelect(select.filter((sel) => sel !== v));
        } else {
            setSelect([...select, v]);
        }
        // cambio de estado de ese valor
        setChange({ ...change, [target.name]: !change[v] });
    };


    const selectAll = ({ target }) => {
        // Envía state valor boolean
        setCheckedAll(target.checked);

        // Comparación si es true agrega todo
        // si no lo vacía
        if (!checkedAll) {
            setSelect(state);
            setChange({
                uno: true,
                dos: true,
                tres: true
            });
        } else {
            setSelect([]);
            setChange(initialState);
        }
    };

    console.log(select);
    console.log(change);

    return (
        <div>
            <form action="">
                <input
                    name="selectAll"
                    type="checkbox"
                    checked={checkedAll}
                    onChange={selectAll}
                />
                <label htmlFor="">Seleccionar Todo</label>
                {state.map((el, i) => {
                    return (
                        <div key={i}>
                            <input
                                name={el}
                                checked={change[el]}
                                type="checkbox"
                                value={el}
                                onChange={handleChange}
                            />
                            <label htmlFor="">{el}</label>
                        </div>
                    );
                })}
            </form>
        </div>
    );
};

export default Checkbox;

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.