s, I made a component "Checkbox" to be used in others forms of my app, but the state does not update after click. It works and get checked at the DOM, but the state doesn't change, it remains 'false'. I'm using Material-ui v.5.0 and React 18.0.1, all helps will be very appreciated. Thanks in advance. I don't know what mistake I'm doing. I'm a newbie in React. Below follows my codes. It should be a component, where I will use in another form. After checked, I want it to become disabled. Thanks folks.
// CardNotes Component
import React, {useState} from "react";
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import CardContent from '@mui/material/CardContent';
import IconButton from '@mui/material/IconButton';
import { DeleteOutlined } from "@mui/icons-material";
import { Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import Checkbox from './Checkbox';
import { Box } from '@mui/material';
const useStyles = makeStyles({
test: {
border: (note) => {
if (note.status == 'Urgente'){
return '1px solid red'
}
return '1px solid blue'
}
}
})
export default function CardNotes({ note, handleDelete }){
const [checked, setChecked] = useState(false);
console.log('checkbox', checked)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};
const classes = useStyles(note)
return( // receiving props from Notes
<div>
<Card elevation={3} className={classes.test}>
<CardHeader
titleTypographyProps={{
fontSize: 16,
}}
action={
<IconButton onClick={()=> handleDelete(note.id) }>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.status}
/>
<CardContent>
<Typography variant="display2" color="textSecondary">
{note.details}
</Typography>
</CardContent>
<Box ml={2}>
<Checkbox
label="Resolvido"
checked={checked}
onChange={ (e) => setChecked(e.target.checked)}>
</Checkbox>
</Box>
</Card>
</div>
)
}// checkbox component
import React from 'react'
import {FormControl , FormControlLabel} from '@mui/material';
import Checkbox from '@mui/material/Checkbox';
export default function Chekbox (props) {
const { resolved, handleChange } = props;
return (
<FormControl>
<FormControlLabel
control={<Checkbox
checked={resolved}
color="primary"
onChange={handleChange}
/>}
label='Resolvido'
/>
</FormControl>
)
}