CODEWITHSUNDEEP
reactjsreact-hooks
Utkarsh Goel
Utkarsh Goel

Reputation: 311

Array and Objects of states in React

So I have an array of objects and each property in the object comes from the user. User chooses an object that he wants to edit and I am passing it using context to component that takes data from user. Now after getting data I am inserting it back to array but it is giving me wrong data.
Here is component that takes data from user. 

const SelectedSymptom = () => {
    const [
        selected,
        setSelected,
        selectedSymptom,
        setSelectedSymptom,
    ] = useContext(symptomContext);

    const [note, setNote] = useState("");
    const [since, setSince] = useState("");
    const [severity, setSeverity] = useState("");
    const [feature, setFeature] = useState("");
    const [place, setPlace] = useState("");
    const [colour, setColour] = useState("");

    useEffect(() => {
        return async () => {
            await setSelectedSymptom((prev) => {
                return {
                    ...prev,
                    feature,
                    since,
                    severity,
                    place,
                    colour,
                    note,
                };
            });
            await setSelected((prev) => {
                const cur = prev.filter((item) => item.name !== selectedSymptom.name);
                if (selectedSymptom !== "") cur.push(selectedSymptom);
                return cur;
            });
            console.log(selectedSymptom, selected);
        };
    }, [since, feature, severity, place, colour]);
}

Data from form is coming correctly but I guess due to async nature of setState call, I am getting error.

Upvotes: 0

Views: 111

Answers (1)

Tomas
Tomas

Reputation: 1051

First remove the return from useEffect. Return is a cleanup method for useEffect, example to terminate intervals, listeners etc.

I changed to a constant instead update() which I run in the end of the useEffect.

Also the parameters in the code below, you only had set the key, not the value to the keys

await setSelectedSymptom((prev) =>
  return {
    ...prev,
    feature: feature,
    since: since,
    severity: severity,
    place: place,
    colour: colour,
    note: note,
  };
});

I hope this brings some clarification

const SelectedSymptom = () => {
  const [
    selected,
    setSelected,
    selectedSymptom,
    setSelectedSymptom,
  ] = useContext(symptomContext);

  const [note, setNote] = useState("");
  const [since, setSince] = useState("");
  const [severity, setSeverity] = useState("");
  const [feature, setFeature] = useState("");
  const [place, setPlace] = useState("");
  const [colour, setColour] = useState("");

  useEffect(() => {
    const update = async () => {
      await setSelectedSymptom((prev) => {
        return {
          ...prev,
          feature: feature,
          since: since,
          severity: severity,
          place: place,
          colour: colour,
          note: note,
        };
      });
      await setSelected((prev) => {
        const cur = prev.filter((item) => item.name !== selectedSymptom.name);
        if (selectedSymptom !== "") cur.push(selectedSymptom);
        return cur;
      });

      update();
    };
  }, [since, feature, severity, place, colour]);
}

Upvotes: 2

Related Questions