Todavía soy nuevo en la codificación y estoy trabajando en un proyecto y parece que no puedo hacer que esto funcione. cuando se hace clic desde la página de inicio, se supone que lo envía a una página diferente y le da una fortuna aleatoria, pero todo lo que obtengo es una página en blanco.
import React from "react"; {/* <h1 id="fortune-holder" class="fade-animation">What is your fortune?</h1> */} <body> <h1 id="cookie" class="fade-animation">What is your fortune?</h1> </body> var fortunesArray = [ "An exciting opporunity lies ahead", "A long time friend will brirng wise advice in the coming week", "You will find great fortunes in unexpected places", "Never give up... Unless you want to thats cool too", "111", "222", "333", "444", "Maybe a nap is what you need", "Don't Text Your EX!" ]; function getFortune() { var randomFortune = fortunesArray [ Math.floor(Math.random()*fortunesArray.length) ]; console.log(randomFortune); var fortuneHolder = document.getElementById("cookie"); fortuneHolder.innerHTML = randomFortune; fortuneHolder.classList.remove("fade-animation"); void fortuneHolder.offsetWidth; fortuneHolder.classList.add("fade-animation"); }Están pasando muchas cosas aquí:
Debe poner su JSX (lo que parece HTML) en una función de renderizado (si usa React.Component) o en un 'retorno' si solo usa un componente funcional.
Echa un vistazo a cómo se construye esto:
import React from "react"; class Fortune extends React.Component { constructor(props) { super(props); this.state = { fortunes: [ "An exciting opporunity lies ahead", "A long time friend will brirng wise advice in the coming week", "You will find great fortunes in unexpected places", "Never give up... Unless you want to thats cool too", "111", "222", "333", "444", "Maybe a nap is what you need", "Don't Text Your EX!" ], fortune: "" } } componentDidMount() { this.getFortune(); } getFortune = () => { let rand = Math.floor(Math.random() * (this.state.fortunes.length) + 0) console.log(rand); this.setState({ fortune: this.state.fortunes[rand] }) } render() { return ( <div> {/* <h1 id="fortune-holder" class="fade-animation">What is your fortune?</h1> */} <h1 id="cookie" className="fade-animation">What is your fortune?</h1> <h5>{this.state.fortune}</h5> </div> ) } } export default Fortune;Este es un ejemplo de un componente React: vea cómo contiene la función "getFortune" dentro de él. El componenteDidMount es una función especial con reaccionar que se ejecuta cuando se monta el componente. Entonces esto llama a getFortune(), que luego ajusta el estado.
Una vez que el estado se establece con la fortuna aleatoria, la función render() devuelve la fortuna aleatoria debajo de su etiqueta H1 inicial.