Tengo dos inputs que cambian el texto de una etiqueta P al mismo tiempo, pero el problema es que el render que me muestra siempre es el valor anterior que se guardo. Entiendo que tengo que usar un useEffect para que vuelva a renderizar el componente y muestre el valor actual, pero en el handleChange de los inputs si o si necesito enviarle al SetState que cambia el texto, el valor que se guardo en mi objeto inicial. Hasta ahora estoy aprendiendo React y ya he intentado un monton de cosas, pero nada me funciona, como podria hacer para implementar el useEffect en este caso ? Muchas gracias por la ayuda.
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 });
//Basicamente necesito hacer esto -> setTextChange(e.target.value), pero con el valor guardado en el initialValue.
setTextChange(e.target.name === "input1" ? obj.input1 : obj.input2);
};
return (
<div style={{ textAlign: "center" }}>
<form className="test">
<input type="text" name="input1" onChange={handleChange} />
<input type="text" name="input2" onChange={handleChange} />
</form>
<p className="test_Text">{textChange}</p>
</div>
);
};
Dejo un codeSandbox
https://codesandbox.io/s/practical-mahavira-pd94p?file=/src/TestState.js