I am facing an issue with keeping the checkbox state saved after a page reload. Currently, I have stored my unchecked checkboxes in localStorage, but I am unsure about what steps to take next. In simple terms, I want the checkbox to remain unchecked when I revisit the page. Below is a snippet of the code:
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("deliveryMethods", value)}
/>
</div>
)Thank you for your help!