Skip to main content
añadir repo online
Origen Enlace
Javier Cake
  • 1.5k
  • 1
  • 14
  • 38

Todo funciona ahora correctamente salvo que el segundo botón ("Comprobar") nunca aparece.: https://codesandbox.io/s/smoosh-wildflower-7yqkv?fontsize=14

Todo funciona ahora correctamente salvo que el segundo botón ("Comprobar") nunca aparece.

Todo funciona ahora correctamente salvo que el segundo botón ("Comprobar") nunca aparece.: https://codesandbox.io/s/smoosh-wildflower-7yqkv?fontsize=14

[Edit removed during grace period]; se añadieron 1042 caracteres en el cuerpo
Origen Enlace
Javier Cake
  • 1.5k
  • 1
  • 14
  • 38

Actualizo: Cómo ahora hacer que funcionen bien los botones:

return (
            <div>
                <footer>
                    <div><p class="atajos-p">
                            Ahorra tiempo con los <a href="#">atajos de teclado</a>
                        </p></div>
                    <div class="start-game-container">
                    {this.props.handleStateUp &&<React.Fragment><p>PRESIONA ENTER PARA </p> <button onClick={() => this.props.handleStateUp(true)} >Empezar</button></React.Fragment>}
                    {!this.props.handleStateUp &&<React.Fragment><p>PRESIONA ENTER PARA </p>  <button >Comprobar</button></React.Fragment>}
                   
                    </div>
          </footer>
            </div>
        )

Todo funciona ahora correctamente salvo que el segundo botón ("Comprobar") nunca aparece.

Actualizo: Cómo ahora hacer que funcionen bien los botones:

return (
            <div>
                <footer>
                    <div><p class="atajos-p">
                            Ahorra tiempo con los <a href="#">atajos de teclado</a>
                        </p></div>
                    <div class="start-game-container">
                    {this.props.handleStateUp &&<React.Fragment><p>PRESIONA ENTER PARA </p> <button onClick={() => this.props.handleStateUp(true)} >Empezar</button></React.Fragment>}
                    {!this.props.handleStateUp &&<React.Fragment><p>PRESIONA ENTER PARA </p>  <button >Comprobar</button></React.Fragment>}
                   
                    </div>
          </footer>
            </div>
        )

Todo funciona ahora correctamente salvo que el segundo botón ("Comprobar") nunca aparece.

Origen Enlace
Javier Cake
  • 1.5k
  • 1
  • 14
  • 38

Renderizar un componente u otro dependiendo del estado del componente Footer

Esta ahora mismo es mi App:

function App() {
  return (
    <div className="App">
      <NavBar/>
      <PreTest />
      <Footer />
    </div>
  );
}

Quiero que la function App retorne un componente u otro, dependiendo si el this.state.TestIsOn está a true o false.El estado de esta propiedad lo cambia sólo un botón que está dentro de este componente (<a><button onClick={this.toggleTest}>Empezar</button></a>)

Este es el Footer.js

class Footer extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            TestIsOn: false
        }
        this.toggleTest = this.toggleTest.bind(this);
      }
      toggleTest() {
        this.setState({
          TestIsOn: true
        });
      }
    render(){
        return (
            <div>
                <footer>
                    <div><p class="atajos-p">
                            Ahorra tiempo con los <a href="#">atajos de teclado</a>
                        </p></div>
                    <div class="start-game-container">
                    {!this.state.TestIsOn &&<React.Fragment><p>PRESIONA ENTER PARA </p> <a><button onClick={this.toggleTest}>Empezar</button></a></React.Fragment>}
                    {this.state.TestIsOn &&<React.Fragment><p>PRESIONA ENTER PARA </p> <a><button>Comprobar</button></a></React.Fragment>}
                    </div>
          </footer>
            </div>
        )
    }
}

En definitiva, que si TestIsOn: false la función App retorne el componente <PreTest />, y si TestIsOn: true retorne el componente <Test /> pero nunca los a la vez.

He oído que se pueden pasar "props" pero en este caso no se si eso me serviría, para este caso como puedo "trasladar" el estado de esa propiedad del Footer al de App y hacer lo mismo (un condicional &&) pero en vez de con los botones, con los Componentes. Tiene sentido esto?