CODEWITHSUNDEEP
reactjsreact-hooksmaterial-ui
NewBie
NewBie

Reputation: 24

I cannot use my state properly it is showing undefined

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>

Upvotes: 0

Views: 56

Answers (2)

John Li
John Li

Reputation: 7447

Update

Still not sure if I fully understand the desired results, but if the preferred indication state is an array of selected values, such as ["venous"], ["venous", "other"], etc., here is a possible example.

Simplified live demo: stackblitz

Define the state as [] array and modify the event handler to fill the array:

const [indication, setindication] = React.useState([]);

const handleChange = (event) =>
  setindication((prev) =>
    prev.includes(event.target.name)
      ? prev.filter((item) => item !== event.target.name)
      : [...prev, event.target.name]
  );

Because indication is an array only for selected values now, the data of the options need to be be saved in another const or it could come from props:

const optionsData = {
  venous: "",
  flutter: "",
  heartValve: "",
  peripheral: "",
  antibody: "",
  other: "",
};

Original

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

Upvotes: 1

YidiSeeWorld
YidiSeeWorld

Reputation: 1

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]:"" });
  };

Upvotes: 0

Related Questions