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