I have a pre-populated form that pops up as a Dialogue and allows the user to edit info regarding their project. I'd like to use React Hooks to make a functional component that allows me to pass "project_in_progress" as true when checked, and disabled if user selects a 'project_end_date' instead. In other words, if there's an end date, there shouldn't be a checkbox for in progress, and if "progress_in_progress" is checked, the end date should also be disabled. I am using a Checkbox using FormControl on Material-UI:
const [disable, setDisable] = useState(false);
const [currentProject, setCurrentProject] = useState({
student_id: "",
project_description: "",
project_end_date: "",
project_id: null,
project_link: "",
project_name: "",
project_role: "",
project_start_date: "",
project_tech: "",
project_in_progress: false,
});
Here is the useState hooks.
const handleCurrentProjectChange = (e) => {
setCurrentProject({
...currentProject,
[e.target.name]: e.target.value,
});
};
I have a handleCurrentProjectChange to accept the edits being made to the project.
const checkProjectInProgress = () => {
if (currentProject.project_in_progress === true) {
setCurrentProject({
...currentProject,
project_in_progress: false,
});
setDisable(!disable);
} else {
setCurrentProject({
...currentProject,
project_in_progress: true,
})
setDisable(!disable);
}
};
<FormControl component="fieldset">
<FormGroup aria-label="position" row>
<FormControlLabel
value="end"
control={
<Checkbox
style=
onChange={checkProjectInProgress}
checked={currentProject.project_in_progress}
/>
}
label={
<Typography style=>
Check if project "In Progress"
</Typography>
}
labelPlacement="end"
/>
</FormGroup>
</FormControl>
Here is what I have set for the checkBox.
Aucun commentaire:
Enregistrer un commentaire