Adding a select all, uncheck all function to my filter checkboxes react typescript-CodePudding

I created this function which is a filter with checkboxes. How can I add the functionality where you can check all/uncheck all to my existing code, aslo adding typescript to it?

Any help is very appreciated!

function FilterCheckbox(props) {
  const wells = ["All","Legacy Wells", "Injection Wells", "Monitoring Wells"];
  const [checkedWells, setCheckedWells] = useState([]);

  const wellsProps = { wells, checkedWells, setCheckedWells };
  return (
    <div>
      <CheckedWells {...wellsProps} />
    </div>
  );
}

function CheckedWells(props) {
  const handleChecked = e => {
    const well = props.wells[e.target.dataset.id];
    let newCheckedWells = props.checkedWells.filter(item => item !== well);
    if (e.target.checked) newCheckedWells.push(well);
    props.setCheckedWells(newCheckedWells);
  };

  return (
    <div>
      {props.wells.map((well, id) => (
        <label key={id}>
          <input type="checkbox" data-id={id} onClick={handleChecked} /> {well}
        </label>
      ))}

      <p>{props.checkedValues}</p>
    </div>
  );
}
export default FilterCheckbox

CodePudding user response：

You should add checkedattribute and handle your logic there. For example checked={props.checkedWells.includes(<your logic here>)