Is there a way to keep the checkboxes checked even after the page is refreshed in this code snippet? Any code sample or explanation on how to achieve this would be highly appreciated. The complete project code can be found here: https://github.com/Orelso/Project-notes
If you require any other part of the code, please let me know.
import React from "react";
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
CardContent from '@mui/material/CardContent';
{ FormControlLabel, FormGroup, IconButton, Typography } from "@mui/material";
{ DeleteOutlined } from "@mui/icons-material";
{ makeStyles } from "@mui/styles";
Checkbox from '@mui/material/Checkbox';
{ createTheme, ThemeProvider } from "@mui/material";
{ 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>
)
}