Actualmente tengo dos "dos vistas" principales en esta aplicación. Una es <Landing />
que es un componente que muestra que es la pagina principal, y otra es <PreApp />
, que es un componente que forma otros componentes que muestran la segunda página , y que según si se pulsa un botón tienen algunas modificaciones u otras.
class PreApp extends React.Component{
state = { TestIsOn: false }
handleStateUp = (testInOn) => {
this.setState({ TestIsOn: testInOn })
}
render(){
return (
<React.Fragment>
<NavBar />
{this.state.TestIsOn ? <Test /> : <PreTest />}
{this.state.TestIsOn ? <FooterTest /> : <Footer handleStateUp={this.handleStateUp} />}
</React.Fragment>
);
}
}
class App extends React.Component{
state = {ButtonClicked: false}
handleSubmit = (ButtonClicked) => {
this.setState({ ButtonClicked: ButtonClicked })
}
render(){
return (
<div className="App">
{this.state.ButtonClicked ? <PreApp /> : <Landing handleSubmit={this.handleSubmit} />}
</div>
)
}
}
export default App;
No estoy nada contento como actualmente está estructurada la aplicación, porque la funcionalidad de los botones está ahora mismo anclada a "condicionales". A mi me gustaría que simplemente funcionasen con un "simple "onClick" te llevasen a x componente.
Ahora mismo el problema que quería solucionar es que en hay un condicional que según si el botón "CREAR CUENTA" de se pulsa, se renderiza el componente <PreApp />
. Sino <Landing />
es lo que se muestra. Pero claro ahora quiero tambien añadirle funcionalidad al segundo botón ("HAZ UN TEST"), entonces ya no puedo incluirlo en el condicional ternario porque obviamente sólo permite dos.
Por ejemplo si hago esto, obviamente me renderiza las dos cosas de cada condicional:
class App extends React.Component{
state = {ButtonClicked: false}
handleSubmit = (ButtonClicked) => {
this.setState({ ButtonClicked: ButtonClicked })
}
handleLogin = (EnteredLogin) => {
this.setState({EnteredLogin: EnteredLogin})
}
render(){
return (
<div className="App">
{this.state.ButtonClicked ? <PreApp /> : <Landing handleSubmit={this.handleSubmit} />}
{this.state.EnteredLogin ? <Login /> : <Landing handleLogin={this.handleLogin} />}
</div>
)
}
}
export default App;
El componente Landing con los dos botones a los que me refiero:
class Landing extends React.Component{
render(){
return (
<div>
<NavBarMain />
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>lore ipsum
</h1>
<p>
loreimpsum
</p>
</div>
<div class="cta">
<a><button onClick={() => this.props.handleLogin(true)} class="cta-select">CREAR CUENTA</button></a>
<a><button onClick={() => this.props.handleSubmit(true)} class="cta-add">HAZ UN TEST</button></a>
</div>
</div>
<div class="cover">
<img src="" alt="matebook" />
</div>
</section>
</main>
<FooterIndex />
</div>
)
}
}
react-router
? react-router