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;