0

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!

3
  • Lo que mencionas del 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.
    – FranAcuna
    Commented el 6 ene. 2021 a las 5:31
  • @FranAcuna encontré una solución usando una clase y no una funcion, dentro de la clase, cree un objeto llamado this.state, y luego a ese objeto le asigne una propiedad color, despues llame a un metodo llamado componentDidMount() donde dentro tiene un setTimeout y funciono. Aca dejo un video que soluciono el problema: youtube.com/watch?v=8t8sAYah1C4
    – Husdady
    Commented el 6 ene. 2021 a las 5:44
  • 1
    Sí, todo eso está en la documentación de React, puedes crear elementos por medio de clases (utilizando los métodos del ciclo de vida de React como componentDidMount() ) o puedes utilizar elementos funcionales con hooks como useEffect. Te recomiendo que leas la documentación, no hay nada que reemplace leer la documentación.
    – FranAcuna
    Commented el 6 ene. 2021 a las 16:33

1 respuesta 1

1

Si quieres usar state no puedes decir color = "red". Solo puedes cambiar el valor con setState("nuevo valor"). Y cuando escribes setTimeout(() =>...como aquí el codigo va a correr cada 5 segundos. Entonces necesitas usar useEffect con un [] como el segundo argumento para que solo se ejecute una vez.

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [color, setColor] = useState("red");

  useEffect(() => {
    setTimeout(() => {
      setColor("yellow");
      console.log(color);
    }, 5000);
  }, []);

  return (
    <div className="App">
      <React.Fragment>
        <p>Is a tag</p>
        <span id="span" className={color}>
          Hola
        </span>
      </React.Fragment>
    </div>
  );
}
3
  • Voy a probar tu código, recién estoy empezando en React y hay cosas nuevas por aprender :)
    – Husdady
    Commented el 6 ene. 2021 a las 5:45
  • Puedes leer más sobre los setState useState y useEffect hooks aquí ;)
    – milmal
    Commented el 6 ene. 2021 a las 5:50
  • Funciona bien!, aunque me confundio un poco la manera de hacer las cosas en React, igual tengo que leer la documentación, gracias!
    – Husdady
    Commented el 6 ene. 2021 a las 5:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.