CODEWITHSUNDEEP
reactjstypescriptcheckbox
GGotchaA
GGotchaA

Reputation: 295

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!

Upvotes: 0

Views: 1475

Answers (1)

Ben Baldwin
Ben Baldwin

Reputation: 497

first of all, I would recommend storing that in session storage unless you need it to stay checked after opening in a new tab or window.

to accomplish this you just have to read the value from session storage when the component builds. try something like this...

() => {
  const [isChecked, setChecked] = useState(sessionStorage.getItem('isChecked') || false);
  const onCheckboxChange = (key: string, value: boolean) => {
    sessionStorage.setItem('isChecked', value)
    setChecked(value)
  };

  return (
   ...
   <Checkbox
     value={isChecked}
     label="Delivery Methods"
     onChange={(value) => onCheckboxChange("delieveryMethods", value)}
    />
  )
}

Upvotes: 0

Related Questions