How can I keep the check-boxes checked after refresh?

Question

What do I need to add to this code to have the checkboxes stay checked even after I refresh the page? A code sample or an explanation would be appreciated Here is the fullcode to the project: https://github.com/Orelso/Project-notes

If you need me to add any other part of the code let me know

 import React from "react"; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardContent from '@mui/material/CardContent'; import { FormControlLabel, FormGroup, IconButton, Typography } from "@mui/material"; import { DeleteOutlined } from "@mui/icons-material"; import { makeStyles } from "@mui/styles"; import Checkbox from '@mui/material/Checkbox'; import { createTheme, ThemeProvider } from "@mui/material"; import { blue } from "@mui/material/colors"; const theme = createTheme ({ palette: { category: { color: blue } } }) const useStyles = makeStyles({ test: { border: (note) => { if (note.category == 'HTML/CSS') { return '2px solid blue' } else if (note.category == 'Javascript') { return '2px solid green' } else if (note.category == "Javascript/React") { return '2px solid yellow' }else if (note.category == 'MUI') { return '2px solid red' } } }, }) export default function NoteCard({ note, handleDelete }) { const classes = useStyles(note) return ( <div> <Card elevation={10} className={classes.test}> <CardHeader action={ // 200 <IconButton onClick={() => handleDelete(note.id)}> <DeleteOutlined /> </IconButton> } title={<span style={{fontFamily: "monospace", color: "#000000"}}>{note.title}</span>} subheader={<span style={{fontFamily: "Courier New", color: "#000000"}}>{note.category}</span>} /> <CardContent> <FormGroup> <FormControlLabel sx={{color: '#000000'}} control={<Checkbox color="warning" />} label={note.details} /> <FormControlLabel sx={{color: '#555555'}} control={<Checkbox />} label={note.details2} /> <FormControlLabel sx={{color: '#000000'}} control={<Checkbox />} label={note.details3} /> <FormControlLabel sx={{color: '#555555'}} control={<Checkbox />} label={note.details4} /> </FormGroup> </CardContent> </Card> </div> ) }

Answer 1

you can use redux persist to save your data in the local storge the only way to save data or get that data from back-end from rest API

Answer 2

You can save the data entered by the user using a local storage .

localStorage.setItem("keyname", "valueName");

After that, in the component where you need to get this saved data, you access the storage.

localStorage.getItem("keyname");

So in your case you need first to setItem to Local Storage after user change something. Then update the state. Using useEffect you can getItem from localstorage each time the component it loaded.

var style,classes;
const [mystate,setMystate] = useState();

useEffect(()=>{
    style = localStorage.getItem(keyname);
    classes = setMystate(style);
},[]);

After that you can access this variable for your purposes. But you need to update this state every time user change something related to it.

If you need the data of these checkboxes throughout the application, and not just in one component, then you need to use context or redux. In general, you can access the store in each component, but usually we make a global context and access it for global variables. For example, the global style of the application or checking if the user is logged in or not.

Hope this helps, Regards,