reactjs - How to change the state of property from a component in React and Redux -


i have homepage here in i'm placed list of links , routes them, question have 2 links here login , logout when user logged in im showing logout menu instead of login, have isuserauthenticated flag check wheather user logged in or not, when i'm clicking on logout menu want set flag false how can component thanks.

export class homepage extends component {     constructor(state) {         super();      }         render() {         return (             <div classname="col-md-12" style={{ paddingleft: 'unset' }}>                 <div classname="col-md-2" style={{ paddingleft: 'unset' }}>                     <div classname="sidebar-nav">                         <div classname="well" style={{ width: '300px', padding: '8px 0px' }}>                             <ul classname="nav nav-list" style={{ height: '950px' }}>                                 <li classname="nav-header" style={{ marginleft: '45px', marginbottom: '50px' }}><img src={logo} classname="app-logo" alt="logo" /></li>                                 <li classname="active"><link to="index"><i classname="fa fa-home"></i> dashboard</link></li>                                 <li><link to="/addblog"><i classname="fa fa-edit"></i>add blog</link></li>                                 {!this.props.store.getstate().reducer.isauthenticated.isuserauthenticated && <li><a href="/login"><i classname="fa fa-sign-in"></i> login</a></li>}                                 {this.props.store.getstate().reducer.isauthenticated.isuserauthenticated && <li onclick={(event) => { event.preventdefault(); this.props.store.getstate().reducer.isauthenticated.isuserauthenticated = false; }}><a href="/login"><i classname="fa fa-power-off" style={{ color: 'red' }}></i> logout</a></li>}                                 <li><link to="/members"><i classname="fa fa-user"></i> members</link></li>                                 <li><link to="/comments"><i classname="fa fa-comment"></i> comments</link></li>                                 <li><link to="/signup"><i classname="fa fa-registered"></i> sign-up </link></li>                             </ul>                         </div>                     </div>                 </div>                 <div classname="col-md-4">                     <route exact path="/games" component={gamespage} />                     <route path="/login" component={loginpage} />                     <route path="/addblog" component={addblogpost} />                     <route path="/members" component={signup} />                     <route path="/comments" component={addblogpost} />                     <route path="/signup" component={signup} />                 </div>                 <div classname="col-md-4" style={{ marginleft: '10px' }}>                     <route exact path="/games" component={gamespage} />                     <route path="/login" component={signup} />                     <route path="/addblog" component={comments} />                     <route path="/members" component={memberslist} />                     <route path="/comments" component={comments} />                     <route path="/signup" component={loginpage} />                 </div>             </div>         );     } }  export default homepage; 


Comments

Popular posts from this blog

javascript - Replicate keyboard event with html button -

node.js - Node js - Trying to send POST request, but it is not loading javascript content -

Ansible warning on jinja2 braces on when -