since react-router not adding active class links or li's, want keep active link in menus state. when log this.state.activelink correct value, reason class 'activelink' not added li. why this? isactive() correctly returning true or false when log still class not added li. what's going on here?
import react, { component } 'react'; import { link } 'react-router-dom'; import logo '../images/logo.png'; export default class navbar extends component { constructor(props){ super(props); this.state = { activelink : '' }; this.setactive = this.setactive.bind(this); } setactive(event){ this.setstate({ activelink: event.target.id }); } isactive(link){ console.log('isactive:', link == this.state.activelink); link == this.state.activelink ? 'activelink' : ''; } render(){ return ( <div classname="header"> <div classname="row"> <div classname="header-left"> <div classname="logo"> <img src={logo} alt=""/> </div> <div classname="header-title">physical twist</div> <div classname="menu"> <ul classname="nav"> <li classname={this.isactive('home')}><link to="/" id="home" onclick={this.setactive}>home</link></li> <li classname={this.isactive('store')}><link to="/store" id="store" onclick={this.setactive}>store</link></li> <li classname={this.isactive('catalogue')}> <link to="#" id="catalogue" onclick={this.setactive}>catalogue</link></li> <li classname={this.isactive('contact')} ><link to="#" id="contact" onclick={this.setactive}>contact</link></li> </ul> </div> </div> </div> </div> ); }; }
because forgot add return in isactive() function, use this:
isactive(link){ console.log('isactive:', link == this.state.activelink); return link == this.state.activelink ? 'activelink' : ''; } 
Comments
Post a Comment