React Redux and React Router connect - reactjs

Question

when I try to dispatch an event on logout function it shows me an error I think the way I am connecting Redux is wrong but I'm not sure can anyone solve this?
Logout Function
Auth.logout(() => {
Firebase.auth().signOut().then(() => {
this.props.updateState();
});
})
Dispatch
const mapDispatchToProps = dispatch => {
return{
updateState: () => dispatch({type: 'UPDATE_REDUX_STATE'})
}
}
Export with connect and withRouter
export default withRouter(connect(null, mapDispatchToProps)(Navigation))
Navigation Component
class Navigation extends Component {
logoutHander(){
Auth.logout(() => {
Firebase.auth().signOut().then(() => {
this.props.updateState();
});
})
}
render(){
return(
<div className="custom-container-fluid">
<nav className="navbar navbar-expand-md text-center">
<div className="container">
<a className="navbar-brand" href="/">FG</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
{
Auth.isAuthenticated() === true ?
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/home"><i className="fas fa-home" style={{marginRight: '3px'}}></i>Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/myrecipe"><i className="fas fa-stream" style={{marginRight: '3px'}}></i>My Recipes</Link>
</li>
<li className="nav-item" onClick={this.logoutHander}>
<Link className="nav-link" to="/"><i className="fas fa-user" style={{marginRight: '3px'}}></i>Logout</Link>
</li>
<li className="nav-item upload-nav">
<Link className="nav-link" to="/uploadRecipe"><i className="fas fa-upload" style={{marginRight: '3px'}}></i>Upload Recipe</Link>
</li>
</ul>
:
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/login"><button className="btn nav-btn-signup"><i className="fas fa-user" style={{marginRight: '3px'}}></i>Login</button></Link>
</li>
</ul>
}
</div>
</div>
</nav>
</div>
);
}
Error I am getting is Cannot read property 'props' of undefined

Answer 1

This reference not possessed inside the firebase method,
can you pass this instance value to some other variable, Current instance will be copied when the function till complete
constructor(props) {
super(props);
}
logoutHander(){
const self = this;
Auth.logout(() => {
Firebase.auth().signOut().then(() => {
self.props.updateState();
});
})
}