CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxreact-router
ganesh kaspate
ganesh kaspate

Reputation: 2685

How do I use the anchor tag for the logout in react js

I am new to the react-redux , Here I have a logout functionality.

so, here 

<div className="logout">
     <a href="#" onClick={this.logout()}>Logout</a>
 </div>

Now, In this I also want to clear the state of reducer. and want to redirect user to the login page.

Now,

what I did was 

logout = () => {


    this.props.logout()

}




  export default logout = () => {

     localstorage.clear();
    history.push('/login');

    }

So, Here , can any one suggest me the way to work with anchors.

Upvotes: 0

Views: 529

Answers (1)

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15851

// Remove parentheses or the method will be called at every render

<div className="logout">
  <a href="#" onClick={this.logout}>Logout</a>
</div>

Stop the propagation and default anchor behavior: 

logout = (e) => {
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
    e.preventDefault();
    this.props.logout()
}

Upvotes: 2

Related Questions