En la raiz del projecto, tengo el App.js, en el cual, pretendo sacar un contenido u otro según el state del componente.
El contenido en concreto se trata de un video en el caso de que el usuario esté en Home, o un slider en el caso que esté en todas y cada unas de las páginas menos el home.
Tengo el siguiente código en el componente:
class App extends Component {
constructor(props){
super(props);
this.state = {
isHome:true
};
this.notHome = this.notHome.bind(this);
this.isHome = this.isHome.bind(this);
}
notHome(){
this.setState({isHome:false});
}
isHome(){
this.setState({isHome:true});
}
render() {
const inicio = this.state.isHome ? 'video-header' : 'slider-header';
return (
<div className="App">
<header className={inicio}>
<HeaderCom isHome={this.state.isHome}/>
<nav className={'nav-header'}>
<ul className={'desktop-menu'}>
<li className={'item-menu-desktop'} onClick={this.isHome}>
<NavLink to={'/'}>Inicio</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/servicios'}>Servicios</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/imprenta'}>Imprenta</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/tienda'}>Tienda</NavLink>
</li>
<li className={'item-menu-desktop'} onClick={this.notHome}>
<NavLink to={'/contacto'}>Contacto</NavLink>
</li>
</ul>
</nav>
</header>
<Switch>
<Route exact path={'/'} component={homeComponent}/>
<Route path={'/home'} component={homeComponent}/>
<Route path={'servicios'} component={serviciosComponent}/>
<Route path={'/imprenta'} component={imprentaComponent}/>
<Route path={'/contacto'} component={contactoComponent}/>
<Route component={notFoundComponent}/>
</Switch>
</div>
);
}
}
El headerComp es el componente que quiero renderizar según el valor de isHome. Con lo cual, el código que tengo es:
function HeaderCom({isHome}) {
if({isHome}){
return(
<div>Es home</div>
)
}else{
return(
<div>No es home</div>
)
}
}
Siempre muestra "Es home", ¿Por qué no detecta el cambio del state?
console.log
dentro denotHome
y así ver si se está llamando. Lo que creo yo que puede pasar es que como dentro del<li>
tienes un<NavLink>
entonces el evento lo está agarrando elNavLink
y no elli
, pero incluso puede ser hasta un error de estilos, por eso primero asegúrate que si se esté llamando el método, de llamarse el error es el que te mencioné del eventoconsole.log
en la función y entra, lo que no realiza la condición :(if (isHome) { ...