Scoping during Login with React and react-redux-firebase - reactjs

Question

I am using react-redux-firebase for authentication and user management.Once users login, I want to navigate the user to their dashboard with an url of 'dahboard/userId.' When the user authenticate firebase gives us a response that has the user's ID there. The problem is when I attempt to complete a nav request via 'this.history.push('dahsboard/uid') I keep getting an error that says 'this' is undefined. I'm pretty sure it is a scoping issue but I cannot figure out exactly how I need to structure the code to solve the problem.
I have already tried to store the uid as a const. I have also tried chaining another async funciton to the request. Either this.props is undefined or the uid is undefined.
onSubmit = (e) => {
e.preventDefault();
// this.props.signIn(this.state);
this.props.firebase.login(this.state)
.then(function(res){
const userId = res.user.user.uid;
console.log(userId);
this.props.push('/dashboard/userId');
// ! Scoping issue - How to get 'props' in or userId out of this scope
})
.catch(
err => console.log(err.message),
)
}
render() {
const authError = this.props.authError;
return(
<div className="container">
<div className="row">
<div className="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div className="card card-signin my-5">
<div className="card-body">
<div className = "red-text center">
{authError ? <p> {authError.message} </p> : null}
</div>
<h5 className="card-title text-center">Sign In</h5>
<form className="form-signin" onSubmit={this.onSubmit}>
<div className="form-label-group">
<label>Email address
<input type="email" id="inputEmail" className="form-control" placeholder="Email address" value={this.state.email} onChange={this.onChangeEmail} required autoFocus />
</label>
</div>
<div className="form-label-group">
<label>Password
<input type="password" id="inputPassword" className="form-control" placeholder="Password"
value={this.state.password}
onChange={this.onChangePassword}
required />
</label>
</div>
<div className="custom-control custom-checkbox mb-3">
<input type="checkbox" className="custom-control-input" id="customCheck1" />
<label className="custom-control-label" >Remember password
</label>
</div>
<button className="btn btn-lg btn-primary btn-block text-uppercase" type="submit">Sign in</button>
<hr className="my-4" />
</form>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default compose(
//map firebase redux to props
firebaseConnect((props) => {
}),
connect(
//map redux-state to props
(state) => ({
userId: state.firebase.auth.uid,
authError: state.firebase.authError,
auth: state.firebase.auth
})
)
)(Login)

Answer 1

You need to use withRouter from "react-router" like so:
export default withRouter(connect(mapStateToProps, {
...
})(App));
Then it will be accessible through this.props;
You can also pass history through props from App if you have a nested component like so:
<NestedComponent history={this.props.history}/>