Necesito rotar un elemento según la entrada del usuario. El caso es que en mi componente funcional estoy usando useState hook para almacenar y actualizar el valor que el usuario escribió, pero el elemento se gira no en función de la última entrada sino de la anterior.
Recreé el ejemplo simplificado en CodeSandbox para ilustrar el problema.
¿Cómo hago para que funcione correctamente en un componente funcional?
https://codesandbox.io/s/strange-clarke-nlyuo?file=/src/App.js:0-762
No debe acceder al DOM para configurar la transformación. Debe eliminar la línea querySelector de su entrada.
<input type="number" max={359} value={value} onChange={(e) => { setValue(e.target.value); // don't do this 👇 document.querySelector("h1").style.transform = `rotate(${value}deg)`; }} />El cambio de estado desencadenará una nueva renderización, así que solo configure la transformación durante la renderización:
<h1 style={{ transform: `rotate(${value}deg)`, border: "1px solid pink", display: "inline", padding: "10px" }} >