mercredi 18 novembre 2020

save Checkbox state after page reload

I have trouble with saving checkbox state after page reload. I have saved my unchecked checkboxes to a localStorage for now, but dont have an idea what should be my next step. Simply to say, when I uncheck a checkbox, i want it stay unchecked when I come back to that page. Here is a code snippet.

export default () => {
  const [isDefaultChecked, setDefaultChecked] = useState(true);
  const [isChecked, setChecked] = useState();
  const [isColumn, setColumn] = useState(true);
  const [hiddenColumns, setHiddenColumns] = useState([]);
  const [Checked, setIsChecked] = useState([]);
  
  const onCheckboxChange = (key: string, value: boolean) => {
    console.log(key, value);

    if (!value)
      setHiddenColumns((hiddenColumns) => [...hiddenColumns, { label: key }]);
    else setHiddenColumns(hiddenColumns.filter((x) => x.label !== key));
  };
 return(
 <Dialog
          isOpen={isDialogOpen}
          onOkClick={() => {
            localStorage.setItem(
              "hiddenColumns",
              JSON.stringify(hiddenColumns)
            );
            console.log(hiddenColumns);
            setDialogOpen(false);
          }}
          onCloseClick={() => setDialogOpen(false)}
        >
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery Methods"
              onChange={(value) => onCheckboxChange("delieveryMethods", value)}
            />
          </div>
 )

Thank you very much!




Aucun commentaire:

Enregistrer un commentaire