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