'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