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

Question

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:

I will update my post and I will show the error inside of my console, — DevGe, Apr 10 '19 at 16:56
It looks in your example like DriverHeader is a function component, not a class component. If that is the case, remove `this.` and just do: `onClick={AuthLogout}`. *edit*: Acutally, I realize now it is also a function within the class component. So you'll need to bind it to the instance. Add `this.DriveHeader = this.DriveHeader.bind(this)` in the constructor. Do this to all methods that reference `this`. — amcdrmtt, Apr 10 '19 at 17:00
@amcdrmtt thanks Solved my problem by doing this onClick={AuthLogout} and make the Authlogout look like this function AuthLogout() { localStorage.clear(); window.location.href = "/Home"; } — DevGe, Apr 10 '19 at 17:03

score 2 · Answer 1 · answered Apr 10 '19 at 17:05

2

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.

answered Apr 10 '19 at 17:05

DevGe

1,381
4
35
66

score 2 · Answer 2 · answered Apr 10 '19 at 17:08

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>

Code-Apprentice · Answer 3 · 2019-04-10T17:01:56.247

1

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>

edited Apr 10 '19 at 17:01

answered Apr 10 '19 at 17:00

Code-Apprentice

81,660
23
145
268

@DevGe Which constructor? I mean what class is that constructor in? – Code-Apprentice Apr 10 '19 at 17:01
I think the bind is actually needed on `DriveHeader` which is the function referencing `this` – amcdrmtt Apr 10 '19 at 17:02

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

3 Answers3