Array and Objects of states in React - reactjs

Question

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.

Answer 1

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