let color = "red";
function Application(){
setTimeout(()=>{
color = "yellow",
console.log(color)
}, 5000)
console.log(color)
return (
<React.Fragment>
<p>Is a tag</p>
<span id="span" className={color}></span>
</React.Fragment>
);
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
Hola, estoy aprendiendo React y me he topado con un problema al usar setTimeout
, el nuevo valor de la variable no se aplica a la clase despues de 5 seg, ¿Porqué sucede eso?, he comprobado usando un console y si cambia el valor en la consola pero la clase sigue estando en red y no en yellow.
Creo que en React usan un obj llamado state
para cambiar el estado de un componente, si es por eso, como puedo hacer para que después de 5s cambie de red a yellow, Gracias!
state
es cierto. El ciclo de vida de un componente de react es el encargado de re-renderizar los elementos del DOM que lo necesitan, por lo tanto, si quieres que react renderice un objeto luego de que exista un cambio debes de hacerlo por medio de las técnicas que especifican en la documentación.componentDidMount()
) o puedes utilizar elementos funcionales conhooks
comouseEffect
. Te recomiendo que leas la documentación, no hay nada que reemplace leer la documentación.