Logging in in the second time - reactjs

Question

I am building a log in, just practice, so the problem is when I click Log in with the correct info, the first time it dont do nothing, it logs in the second time only. I think the problem is that the data stores in the state for first and then It verifies and continue to the next page
.
When the info is wrong it gives the error message for the first time but when I log in it logs in only with the second try
import { Link } from 'react-router-dom';
class Index extends Component {
state = {
errorMessage: false,
isValueCorrect: false,
info: {
email: '',
password: ''
},
login: {
email: 'Email#gmail.com',
password: '1234'
}
};
updateInfo = e => {
this.setState({
info: { ...this.state.login, [e.target.name]: e.target.value }
});
};
submit = e => {
e.preventDefault();
if (
this.state.info.email === this.state.login.email &&
this.state.info.password === this.state.login.password
) {
this.setState({ isValueCorrect: true });
} else {
this.setState({ errorMessage: true });
}
};
render() {
return (
<div className="text-center container mt-4" style={{ width: '50%' }}>
<form className="px-4 py-3" onSubmit={this.submit}>
<div className="form-group">
{this.state.errorMessage === true ? (
<p className="text-danger">The email or the password is wrong</p>
) : null}
<label>Email: </label>
<input
type="text"
placeholder="Email#example.com"
className="form-control"
name="email"
value={this.state.info.email}
onChange={this.updateInfo}
/>
</div>
<div className="form-group">
<label>Password: </label>
<input
type="text"
placeholder="Password"
className="form-control"
name="password"
value={this.state.info.password}
onChange={this.updateInfo}
/>
</div>
{this.state.isValueCorrect === true ? (
<Link to="Profile">
<button type="submit" className="btn btn-secondary mt-3">
Log in
</button>
</Link>
) : (
<button type="submit" className="btn btn-secondary mt-3">
Sign in
</button>
)}
<div>
<Link to="/register" className="badge badge-light p-2 m-2">
Register
</Link>
</div>
</form>
</div>
);
}
}
export default Index;

Answer 1

You're indeed correct in your assessment that the first click only validates the data. You're displaying either a submit button or a link pretending to be a submit button based on the isValueCorrect state flag. That flag is only set once the form is submitted whereas it should be set when the values are correct. There are a few ways you could fix this. Choose one, not both.
1. Set the flag when the values are correct.
updateInfo = e => {
const info = { ...this.state.info, [e.target.name]: e.target.value };
this.setState({
info,
isValueCorrect: (
info.email === this.state.login.email &&
info.password === this.state.login.password
)
});
};
And only handle error in submit.
submit = e => {
e.preventDefault();
if (!this.state.isValueCorrect) {
this.setState({ errorMessage: true });
}
};
2. Use Redirect instead of Link
import { Redirect } from 'react-router-dom';
Replace the conditional {this.state.isValueCorrect === true ... ternary with
<button type="submit" className="btn btn-secondary mt-3">
Sign in
</button>
and add a conditional path to render.
render() {
if (isValuesCorrect) return <Redirect to="Profile" />
return (
...
);
}
Other mistakes
login in state is never changed, so it should be a static constant of the class instead of a filed in state.
updateInfo spreads state.login into state.info, when it should propably spread state.info instead.