0

Este es mi componente App:

import Footer from "./components/Footer/Footer"
import './App.css';

class App extends React.Component{
  state = { TestIsOn: false }

    handleStateUp = (testInOn) => {
        this.setState({ TestIsOn: testInOn })
    }

  render(){
    return (
      <div className="App">
        <NavBar/>
        {this.state.TestIsOn ? <Test /> : <PreTest />}
        <Footer handleStateUp={this.handleStateUp} />
      </div>
    );
  }

}

Cómo puedo hacer que el componente Footer renderice un botón u otro (abajo se muestran) dependiendo de si TestIsOn: false o TestIsOn: true que se encuentra en el componente App? Actualmente estoy usando handleStateUp como condicional pero este enfoque no funciona.

class Footer extends React.Component{
   
    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.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>
        )
    }
}

Aquí el repo online https://codesandbox.io/s/smoosh-wildflower-7yqkv?fontsize=14

1
  • Revisa mi respuesta en donde te explico cual fue tu problema junto con la solución para que te pueda funcionar en forma correcta. Con esto espero a ver aclarado tus dudas. Si la respuesta te sirve no dudes en marcarla para que pueda servir a futuro a otras personas de SO.
    – vicasas
    Commented el 6 sept. 2019 a las 18:24

2 respuestas 2

1

Lo que puedes hacer es pasar el valor de TestIsOn a el Footer a traves de un prop de la siguiente manera

  <Footer
      TestIsOn={this.state.TestIsOn}
      handleStateUp={this.handleStateUp}
  />

Y en tu componente Footer puedes renderizar un botón u otro dependiendo del valor que le pases en el prop

 <div class="start-game-container">
        {this.props.TestIsOn && (
          <React.Fragment>
            <p>PRESIONA ENTER PARA </p>{" "}
            <button onClick={() => this.props.handleStateUp(false)}>
              Empezar
            </button>
          </React.Fragment>
        )}
        {!this.props.TestIsOn && (
          <React.Fragment>
            <p>PRESIONA ENTER PARA </p>{" "}
            <button onClick={() => this.props.handleStateUp(true)}>
              Comprobar
            </button>
          </React.Fragment>
        )}
 </div>

Te dejo un link modificando tu ejemplo que esta funcionando

0

El problema es que estas evaluando una función this.props.handleStateUp como si fuese un true o false recuerda que en el componente App.js handleStateUp es una función que actualiza tu estado local del mismo componente. Ese seria tu error.

¿COMO LO SOLUCIONO?

Fácil ! a tu componente <Footer /> pasale las props correspondientes desde el componente <App /> seria algo como:

<Footer
  TestIsOn={this.state.TestIsOn}
  handleStateUp={this.handleStateUp}
/>

Puedes verlo funcionando acá

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.