How do I get the multiple values of the checkbox?

Question

I plan to have a form to submit all of those that were clicked by the user using checkbox. I'm trying to view the submitted form in the console log. So far, I haven't been able to view what was checked in the console.log. Every time I'll click submit, it will only show true or false for each of the choices.

This is what it shows in the console.log

 {checkedA: true, checkedB: false, checkedC: false, checkedD: true}

Expected output is that . If I'll click "Fever", it will also output the word/string "Fever". Since I'll be storing this in Firestore later on.

const SideEffects = (props) => {
  const classes = useStyles();
  const [others, setOthers] = useState("");
  const [state, setState] = useState({
    checkedA: false,
    checkedB: false,
    checkedC: false,
    checkedD: false,
  });
  const handleCheckbox = (event) => {
    console.log(event.target.value);
    setState({ ...state, [event.target.name]: event.target.checked });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(others, state);
  };

  return (
    <Container>
      <Typography>
        Mark the symptoms or side effects you've experienced{" "}
      </Typography>
     
      <form onSubmit={handleSubmit}>
        <Card className={classes.root}>
          <FormGroup style={{ alignContent: "center", padding: "1rem" }}>
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.checkedA}
                  name="checkedA"
                  color="primary"
                  value="Fever"
                  onChange={handleCheckbox}
                />
              }
              label="Fever"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.checkedB}
                  name="checkedB"
                  color="primary"
                  value="Headache"
                  onChange={handleCheckbox}
                />
              }
              label="Headache"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.checkedC}
                  name="checkedC"
                  color="primary"
                  value="Nausea"
                  onChange={handleCheckbox}
                />
              }
              label="Nausea"
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={state.checkedD}
                  name="checkedD"
                  color="primary"
                  value="Muscle Pain"
                  onChange={handleCheckbox}
                />
              }
              label="Muscle Pain"
            />
            <TextField
              type="text"
              label="Ohers:"
              value={others}
              onChange={(e) => setOthers(e.target.value)}
            />
          </FormGroup>
          <ButtonForm type="submit">Submit</ButtonForm>
        </Card>
        <br />
      </form>
    </Container>
  );
};

export default SideEffects;

Answer 1

Use checkbox values instead of names in useState:

{
  "Fever": false,
  "Headache": false,
  "Nausea": false,
  "Muscle Pain": false,
}