'UseState renders me the previous state
I have two inputs that change the text of a P tag at the same time, but the problem is that the render that shows me is always the previous value that was saved. I understand that I have to use a useEffect to render the component again and show the current value, but in the inputs handleChange if or if I need to send to the SetState that changes the text, the value that was saved in the initialValue. Until now I am learning React and I have already tried a lot of things, but nothing works for me, how could I implement the useEffect in this case? Thank you very much for the help.
const initialValue = {
input1: 0,
input2: 0,
};
const TestState = () => {
const [obj, setObj] = useState(initialValue);
const [textChange, setTextChange] = useState("-");
useEffect(() => {}, [obj]);
const handleChange = (e) => {
setObj({ ...obj, [e.target.name]: e.target.value });
//Basically I need to do this -> setTextChange(e.target.value), but with the value stored in the initialValue.
setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
};
return (
<div>
<form>
<input type="text" name="input1" onChange={handleChange} />
<input type="text" name="input2" onChange={handleChange} />
</form>
<p>{textChange}</p>
</div>
);
};
https://codesandbox.io/s/practical-mahavira-pd94p?file=/src/TestState.js
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
