1

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?

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.: https://codesandbox.io/s/smoosh-wildflower-7yqkv?fontsize=14

2
  • Tienes que levantar el estado al componente más cercano.
    – vicasas
    Commented el 6 sept. 2019 a las 14:18
  • Mira la respuesta que te deje, espero que sea de tu ayuda si es así la puedes marcar para que a otra persona le pueda servir en el futuro si se encuentra con tu mismo problema. Saludos !.
    – vicasas
    Commented el 6 sept. 2019 a las 14:40

2 respuestas 2

1

LEVANTANDO EL ESTADO

Se recomienda levantar el estado compartido al al ancestro común más cercano. Para realizar esto un ejemplo claro seria:

App.js

import React, { Component, Fragment } from 'react'

export default class App extends Component {
    state = { TestIsOn: true }

    handleStateUp = (testInOn) => {
        this.setState({ TestIsOn: testInOn })
    }
    render() {
        return (
            <>
                <NavBar/>
                {this.state.TestIsOn ? <PreTest /> : <Test />}
                <Footer handleStateUp={this.handleStateUp} />
            </>
        )
    }
}

Footer.js

import React, { Component, Fragment } from 'react'

export default class Footer extends Component {
    render() {
        return (
            <div>
                <button onClick={() => this.props.handleStateUp(true)} >Enable test</button>
                <button onClick={() => this.props.handleStateUp(false)} >Disable test</button>
            </div>
        )
    }
}

Esta solución es la que se recomienda en la documentación oficial de React la cúal puedes ingresar para revisar desde acá y puedes encontrar un ejemplo más real de como implementar el levantamiento de estado.

9
  • Muchas gracias, si eso parece que tiene más sentido. Por cierto como puedo conservar la otro función onclick que tenía en el mismo botón (la de toggleTest) ? He probado haciendo esto: onClick={() => { this.props.handleStateUp(true); this.toggleTest;} Pero me da error Commented el 6 sept. 2019 a las 14:56
  • Tu función toggleTest debería estar en tu archivo App.js y pasárselas por props a Footer por ende solo deberías tener una función en el onclick la que te va a actualizar el estado del componente. O necesitas si o si tener dos funciones? si es así ¿Para que?
    – vicasas
    Commented el 6 sept. 2019 a las 15:05
  • Cierto, no lo necesito, pero Necesito tener un condicional si o si que depende de si TestIsOn es false o true, dependiendo si el test ha comenzado el footer renderiza el boton "Empezar" o el botón "Comprobar". Lo he cambiado y ahora me funciona el código pero ahora el botón "Comprobar" nunca aparece... actualizo el código arriba a ver si me puedes ayudar Commented el 6 sept. 2019 a las 15:10
  • Te aconsejo que pruebes mejor con un IF ternario. condición ? true : false
    – vicasas
    Commented el 6 sept. 2019 a las 15:21
  • Nada, funciona perfectamente como lo anterior pero el botón no cambia. No entiendo... el handleStateUp cambia en el momento en el que se clicka el botón, no? Se te ocurre alguna otra opción para realizar esto? Commented el 6 sept. 2019 a las 15:37
1

ya que el valor la información sobre si el test está o no activo, debe ser reconocida a un nivel más alto en la jerarquía de componentes, guardaría este estado dentro del componente <App /> y pasaría un callback como prop al componente Footer, permitiendo llamar este callback desde ahí, algo como:

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

  render() {
    return <div className="App">
      <NavBar/>
      <PreTest />
      {this.state.testIsOn ? <TestIsEnabled /> : <TestIsDisabled />}
      <Footer toggleTestStatus={(testIsOn) => this.setState({...this.state, testIsOn });} />
    </div>;
  }
}

...

class Footer extends React.Component {
  render() {
    return <div>
      <button onClick={() => this.props.toggleTestStatus(true)} >Enable test</button>
      <button onClick={() => this.props.toggleTestStatus(false)} >Disable test</button>
    </div>;
  }
}

no he probado el código como tal, pero se entiende la idea.

saludos

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.