Cant log in with the first time, OnSubmit - reactjs

Question

I am validating some details, the problem is when the validation is complete and I want to move to the next page with submit. it logs in with the second try
I have tried to put all the validation process to the OnChange function, but it messes up all of the validation process, I have also tried to put the error variables to the state but I receive an error message that It's constant variables and can't be changed.
import { Link } from 'react-router-dom';
class Profile extends Component {
state = {
details: {
firstName: '',
lastName: '',
id: '',
email: ''
},
error: false,
complete: false
};
OnSubmit = e => {
e.preventDefault();
let re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const { email } = this.state.details;
const { firstName } = this.state.details;
const { lastName } = this.state.details;
const { id } = this.state.details;
let errorid = false;
let errorfirstlast = false;
let erroremail = false;
if (id.length <= 9 && id !== '') {
console.log('trueid');
errorid = false;
} else {
errorid = true;
console.log('falseid');
}
if (re.test(email)) {
console.log('trueemail');
erroremail = false;
} else {
erroremail = true;
console.log('falseemail');
}
if (
firstName !== '' &&
lastName !== '' &&
firstName.substr(0, 1) === firstName.substr(0, 1).toUpperCase() &&
lastName.substr(0, 1) === lastName.substr(0, 1).toUpperCase() &&
!firstName.match(/\d/) &&
!lastName.match(/\d/)
) {
console.log('truefirstlast');
errorfirstlast = false;
} else {
errorfirstlast = true;
console.log('falsefirstlast');
}
if (erroremail === true || errorfirstlast === true || errorid === true) {
this.setState({ error: true });
} else {
this.setState({ error: false });
this.setState({ complete: true });
}
};
OnChange = e => {
e.preventDefault();
this.setState({
details: { ...this.state.details, [e.target.name]: e.target.value }
});
};
render() {
return (
<div>
<div className="container text-center mt-4" style={{ width: '500px' }}>
<form className="px-4 py-3" onSubmit={this.OnSubmit}>
<div className="form-group">
{this.state.error === true ? (
<p className="text-danger">
Some of the details are wrong check the fields above
</p>
) : null}
<label>First Name:</label>
<input
type="text"
className="form-control"
onChange={this.OnChange}
name="firstName"
/>
</div>
<div className="form-group">
<label>Last Name:</label>
<input
type="text"
className="form-control"
onChange={this.OnChange}
name="lastName"
/>
</div>
<div className="form-group">
<label>ID Number:</label>
<input
type="text"
className="form-control"
onChange={this.OnChange}
name="id"
/>
</div>
<div className="form-group">
<label>Email:</label>
<input
type="text"
className="form-control"
onChange={this.OnChange}
name="email"
/>
</div>
{this.state.complete === true ? (
<Link to="/success">
<button type="submit" className="btn btn-secondary mt-3">
Check
</button>
</Link>
) : (
<button type="submit" className="btn btn-secondary mt-3">
Check
</button>
)}
</form>
</div>
</div>
);
}
}
export default Profile;
The problem is that I enter the next page with the second click on the submit button, I want to enter with the first try

Answer 1

The reason that routing to the next page only happens on the second click of the Submit button is because the Link to the next page is only rendered after this.state.complete is true, which only happens after hitting submit for the first time.
In other words, the flow you have currently is:
Fill in form, when done, hit the "Check" button
Hitting the "Check" button triggers the onSubmit function. If the input data is valid, set the state variable complete to true.
Updating state triggers a re-render and now the "Check" button contains the Link to the next page.
Click the "Check" button again, which will click the Link and take the user to the next page.
(Note: perhaps the flow would be more clear if you separated the Link from the submit button)
If you want the user to be taken to the next page on the first click of the "Check" button (if the input data is valid), you can control the routing programmatically inside of the onSubmit function, rather than relying on a Link to be clicked. This can be done by passing the desired route to history.push. In fact, with this method, we can do away with the complete state variable entirely (and the Link in your render method).
For example:
import { withRouter } from "react-router-dom";
class Profile extends Component {
onSubmit = e => {
// ... validation
if (erroremail || errorfirstlast || errorid) {
this.setState({ error: true });
} else {
this.props.history.push("/success");
}
}
}
export default withRouter(Profile);
Note that you'll need to wrap Profile in withRouter in order to access this.props.history.
Also a small code-style note: checking if a boolean is equal to true is redundant, since the value itself is already either true or false (which are the outputs of the === operator anyway).

Answer 2

setState is asynchronous, wrapping it in a function call will make it work for you.
if (erroremail === true || errorfirstlast === true || errorid === true) {
this.setState(() => { error: true });
} else {
this.setState(() => { error: false, complete: true });
}
}

Answer 3

I solved this by moving all of the validation to OnChange function.
e.preventDefault();
let re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const details = { ...this.state.details, [e.target.name]: e.target.value };
this.setState({
details,
complete:
details.id.length <= 9 &&
details.id !== '' &&
re.test(details.email) &&
details.firstName !== '' &&
details.lastName !== '' &&
details.firstName.substr(0, 1) ===
details.firstName.substr(0, 1).toUpperCase() &&
details.lastName.substr(0, 1) ===
details.lastName.substr(0, 1).toUpperCase() &&
!details.firstName.match(/\d/) &&
!details.lastName.match(/\d/)
});
and only set the error in submit .