0

Estoy creando una lista de elementos que necesito ir insertando el valor seleccionado en un array cada vez que se marque un checkbox y en caso que se desmarque, este se elimine del array. Estoy intentando con un push pero algo esta fallando, ya que en algunos momentos pareciera que si se esta agregando y luego deja de funcionar.

Este es mi codigo:

import React, { useState } from "react";

const Checkbox = ({ state }) => {
  const arrayCheckbox = [];
  const [select, setSelect] = useState([]);
  const handleSelectAll = (e) => {
    const valueCheckbox = e.target.value;
    arrayCheckbox.push(valueCheckbox);
    setSelect(arrayCheckbox);
  };

  return (
      <div>
        {state.map((el, i) => {
          return (
            <div key={i}>
              <input type="checkbox" value={el} onChange={handleSelectAll} />
              {el}
            </div>
          );
        })}
      </div>
  );
};

export default Checkbox;

1
  • Pero arrayCheckbox se resetea en cada en cada render... no será ese tu problema?
    – Pipe
    Commented el 23 nov. 2022 a las 16:23

2 respuestas 2

1

Espero que te ayude, se puede hacer con una evaluación con método includes si es true ya está en el state y se elimina si es false lo agrega

    import React, { useState } from "react";

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

        const [select, setSelect] = useState([]);

        const handleSelectAll = ({ target }) => {
            const s = target.value;
            if (select.includes(s)) {
                setSelect(select.filter((sel) => sel !== s));
            } else {
                setSelect([...select, s]);
            }
        };

        console.log(select);


        return (
            <div>
                {state.map((el, i) => {
                    return (
                        <div key={i}>
                            <input type="checkbox" value={el} onChange={handleSelectAll} />
                            {el}
                        </div>
                    );
                })}
            </div>
        );
    };

    export default Checkbox;
1

Tu problema está en que, con cada render, tu variable arrayCheckbox se reinicia. Intenta con esto:

import React, { useState } from "react";

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

  const handleSelectAll = (e) => {
    const valueCheckbox = e.target.value;
    const copyArray = [...select];
    copyArray.push(valueCheckbox);
    setSelect(copyArray);
  };

  return (
      <div>
        {state.map((el, i) => {
          return (
            <div key={i}>
              <input type="checkbox" value={el} onChange={handleSelectAll} />
              {el}
            </div>
          );
        })}
      </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.