ReactJS Email form validation : Could not move to the next page - reactjs

Question

I am working on a project where if the login detail is valid, we move to the next page ("/home"). But in my case, while it works perfectly good when the email is invalid, it does not go the expected page when the email is valid. Instead, the page only reloads. Although I have done the necessary in the onSubmit function. Please help
class Test extends React.Component {
constructor(){
super();
this.state = emailState;
this.onChange = this.onChange.bind(this);
}
onChange(e) {
this.setState({
email : e.target.value
});
}
emailValidation(){
const regex = /^(([^<>()[\]\.,;:\s#\"]+(\.[^<>()[\]\.,;:\s#\"]+)*)|(\".+\"))#(([^<>()[\]\.,;:\s#\"]+\.)+[^<>()[\]\.,;:\s#\"]{2,})$/i;
if(!this.state.email || regex.test(this.state.email) === false){
this.setState({
error: "Email is not valid"
});
return false;
}
return true;
}
onSubmit(){
if(this.emailValidation()){
console.log(this.state);
this.props.history.push('/home');
}
}
render(){
return (
<div className="login-cot bg-danger" id="layoutAuthentication">
<div id="layoutAuthentication_content">
<main>
<div className="container ">
<div className="row justify-content-center ">
<div className="col-lg-5 ">
<div className="card shadow-lg border-0 rounded-lg mt-5 bg-secondary">
<center><h1 className="bg-warning" style={{padding:"10px",}}><b><BsBugFill /><BsTools /> <BsColumns /> BFP</b></h1></center>
<div className="card-header"><h3 className="text-center my-1"><b>Login</b></h3></div>
<div className="card-body">
<form>
<div className="form-floating mb-3">
<input className="form-control" id="email" type="email"
placeholder="name#example.com"
value={this.state.email}
onChange={this.onChange}
/>
<label for="inputEmail">Email address</label>
<span className="text-danger">{this.state.error}</span>
</div>
<button type ="submit" className="btn btn-success" onClick={()=>this.onSubmit()}>Login</button>
</form>
</div>
<div className="card-footer text-center py-3">
<div className="small"><Link className="text-light" to="/signup">Need an account? Sign up!</Link></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
)
}
}

Answer 1

Try to use withRouter() function with react , which helps to access the history parameter.
For e.g in your case : export default withRouter(Test);