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