CODEWITHSUNDEEP
javascriptreactjs
DevGe
DevGe

Reputation: 1459

How to call the method inside the function (Clicking the a href to logout) using ReactJS

How to call the method outside the render and call the method inside of the function, for the purpose of to logout out the user by click of that function.

I got of error of this.

Cannot read property 'AuthLogout' of undefined

I will show you guys my sample codes that I already made on my project.

This is my method outside of render:

AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}

This is my function:

function DriverHeader(){

const authorization_USERMAIL = localStorage.getItem('USERMAIL');
if(authorization_USERMAIL)
{
    return (
        <nav className="navbar navbar-expand-lg navbar-light bg-dark" style={{position:'fixed',width:'100%'}}>
            <div className="container-fluid">
                <a className="navbar-brand" href="#">
                    <img src={require('./Assets/logo.png')} alt="" style={{height:50,width:80}}/>
                </a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent" >
                    <ul className="navbar-nav mr-auto" style={{fontSize:16}}>
                        <li className="nav-item active">
                            <Link to="/driver_dashboard" className="nav-link" style={{color:'white',fontWeight:'bold'}}>Dashboard</Link>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" href="#" style={{color:'white',fontWeight:300}}>About Us</a>
                        </li>

                        <li className="nav-item">
                            <a className="nav-link" href="#" tabIndex="-1" aria-disabled="true" style={{color:'white',fontWeight:300}}>Contact Us</a>
                        </li>
                    </ul>
                    <ul className="navbar-nav">

                            <li className="nav-item  dropdown">
                                <div className="row">
                                    <img src={require('./Assets/driver_image.jpg')} className="img-fluid" style={{height:50,width:50,borderRadius:'50%',color:'white'}} alt=""/>
                                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style={{color:'white',marginTop:5,fontWeight:'bold'}}>{authorization_USERMAIL}</a>
                                    <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a className="dropdown-item" href="#">Setting</a>
                                        <a className="dropdown-item" href="#" onClick={this.AuthLogout}>Logout</a>                                      
                                   </div>
                                </div>
                            </li>


                    </ul>
                </div>
            </div>
        </nav>
    )

}

}

This is my render:

render() {
    return (          
                <div>                
                     <Router>                          
                             <DriverHeader/>

                             <Routings/>

                             <Footer/>  
                     </Router>
                </div>
             );
}

Error in my console: Console Error

Upvotes: 1

Views: 1010

Answers (3)

D Mishra
D Mishra

Reputation: 1578

Please have look on Correct use of arrow functions in React it will really help to understand the main problem.

Make AuthLogout an arrow function

AuthLogout=()=> {
    localStorage.clear();
    window.location.href = "/Home";
}

Or bind the AUthLogout on render just like-

<a className="dropdown-item" href="#" onClick=onClick={this.AuthLogout .bind(this)}>Logout</a>

Upvotes: 2

DevGe
DevGe

Reputation: 1459

To solved my problem it must look like this.

function AuthLogout() {
    localStorage.clear();
    window.location.href = "/Home";
}


<a className="dropdown-item" href="#" onClick={AuthLogout}>Logout</a>

Thanks everyone.

Upvotes: 2

Code-Apprentice
Code-Apprentice

Reputation: 83567

It appears that this is undefined where you call AuthLogout(). This occurs because you forgot to bind() your function to the component class. If you have a class which extends Component, then we often do this in the constructor:

constructor(props) {
    super(props);
    this.AuthLogout = this.AuthLogout.bind(this);
}

I assume here that AuthLogout() is also defined in the same class. Alternatively, you can move AuthLogout() outside of any class and call it directly without this:

<a className="dropdown-item" href="#" onClick={AuthLogout}>Logout</a>

Upvotes: 1

Related Questions