My react form is using the useContext to save the value to a global state. Trying to change the value from 1-5 are rendering the previous number and not the current number. How can I change this behavior?
Sandbox link https://codesandbox.io/s/funny-antonelli-0d0rl?file=/src/UpdateForm.js
This code was made with help from https://stackoverflow.com/users/5146848/sifat-haque
Update: I fixed your code! You also had an error in your ValueContext in the same file. You were using updateValue, when that was not set in the context (setValue was the correct one). So I changed the 2 updateValue calls to setValue and voila!
Second Update (more of a sidenote): I would steer away from reusing so many of the same or similar variable names like ItemValue and Itemvalue, this can really make the code harder to read and make these kinds of typos easy to make, and a little more difficult to fix. I would also try using camelCase in react for non-component items ex.(itemValue) or at least (item-value).
LAST EDIT: You also misspelled 'three' in your render method for this component as 'tree'!
See under original comment for full fixed code...hope I helped somewhat!
Original: I haven't figured your code out yet, but I noticed you have a typo in the code in the UpdateForm. You have: itemvalue (which is not defined), when I went into the ValueContext page I noticed you have it listed as: Itemvalue. Be sure to check for other typos and ensure you're working with your proper variables.
Working code:
import { ValueContext } from "./ValueContext";
const UpdateForm = ({ id }) => {
const [ItemValue, setItemValue] = useState();
const [value, setValue] = useContext(ValueContext);
const addValue = (event) => {
const updatedData = value.map((obj) => {
if (obj.id === id) {
return { ...obj, Itemvalue: ItemValue };
} else return obj;
});
setValue(updatedData);
console.log(ItemValue);
};
const updateItemValue = (event) => {
event.preventDefault();
setItemValue(event.target.value);
addValue();
};
return (
<>
<form>
<label> Value: </label>
<select value={ItemValue} onChange={updateItemValue}>
<option value={0}>zero</option>
<option value={1}>one</option>
<option value={2}>two</option>
<option value={3}>tree</option>
<option value={4}>four</option>
<option value={5}>five</option>
</select>
</form>
</>
);
};
export default UpdateForm;
