mercredi 18 novembre 2020

how to pass data as true on check Checkbox for React Material-UI with React Hooks

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