I cannot use my state properly it is showing undefined-CodePudding

This is the error im gettingHere it is showing me error that variable is not defined how can i fix this is there any method which i can use?

 const [indication, setindication] = React.useState({
    venous: "",
    flutter: "",
    heartValve: "",
    peripheral: "",
    antibody: "",
    other: "",
  });

  const handleChange = (event) => {
    const { name: key, value } = event.target;
    if (key === venous) setindication({ ...indication, venous: value });
    else if (key === flutter) setindication({ ...indication, flutter: value });
    else if (key === heartValve)
      setindication({ ...indication, heartValve: value });
    else if (key === peripheral)
      setindication({ ...indication, peripheral: value });
    else if (key === antibody)
      setindication({ ...indication, antibody: value });
    else if (key === other) setindication({ ...indication, other: value });
    else setindication({ ...indication, [key]:"" });
  };

Where here this is the type of condition i have use where i want to apply it in my checkbox if anyone can help me this problem will be really helpful.

     <FormGroup>
                <FormControlLabel
                  value={indication.venous}
                  name="venous"
                  onChange={handleChange}
                  control={
                    <Checkbox  />
                  }
                  label={
                    <Typography fontSize={20}>
                      Venous Thromboembolism (VTE)
                    </Typography>
                  }
                  labelPlacement="start"
                />
              </FormGroup>

CodePudding user response：

Since the value of FormControlLabel is bind with indication.venous, it seems that it would always be "" empty string no matter if the Checkbox is checked.

Provided that this component looks like a Checkbox, perhaps the intended result is to save which options are checked (true or false)?

If so, perhaps the event handler could set event.target.checked as the new value, such as:

const handleChange = (event) =>
  setindication((prev) => ({
    ...prev,
    [event.target.name]: event.target.checked,
  }));

A quick demo hopefully could help to visualize: stackblitz

CodePudding user response：

The Variable key looks like should be string. Try this:

  const handleChange = (event) => {
    const { name: key, value } = event.target;
    if (key === "venous") setindication({ ...indication, venous: value });
    else if (key === "flutter") setindication({ ...indication, flutter: value });
    else if (key === "heartValve")
      setindication({ ...indication, heartValve: value });
    else if (key === "peripheral")
      setindication({ ...indication, peripheral: value });
    else if (key === "antibody")
      setindication({ ...indication, antibody: value });
    else if (key === "other") setindication({ ...indication, other: value });
    else setindication({ ...indication, [key]:"" });
  };