My login react component is not showing the 'wrong credentials' error in the helper text even when false credentials are entered. I am pushing an error message into an array, assigning it to state, and then referencing that state in my helperText prop. Here's the code snippet from my login component:
import React from 'react'
import Header from './Header'
import TextField from "@material-ui/core/TextField";
import Button from '@material-ui/core/Button'
import axios from 'axios'
import {Link} from 'react-router-dom'
import firebase from 'firebase'
import {auth} from 'firebase/app'
class Login extends React.Component {
constructor() {
super();
this.state = {
email: "",
password: "",
errors:[]
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
handleSubmit(e) {
e.preventDefault()
const { email, password } = this.state
const { history } = this.props
const errorLog = []
this.setState({
errors: errorLog
})
auth().signInWithEmailAndPassword(email, password)
.then((res) => {
console.log(res)
history.push('/gigregister')
})
.catch((err) => {
if(err.code = 'auth/wrong-password'){
errorLog.push('Wrong credentials, please try again')
console.log(`this is error state ${this.state.errors}`)
}
})
}
render() {
return (
<>
<div>
<Header />
</div>
<div className ='gig-button'>
<Link to="/Homepage" style={{ textDecoration: "none" }}>
<Button>Gigs this week</Button>
</Link>
</div>
<div className="login-main">
<div className="login">
<h4>Venue login</h4>
<form onSubmit={this.handleSubmit}>
<TextField
placeholder="Enter email"
id="email"
name="email"
onChange={this.handleChange}
/>
<TextField
placeholder="Enter password"
id="password"
name="password"
error ={this.state.errors ? true : false}
helperText = {this.state.errors}
onChange={this.handleChange}
/>
<div className="button">
<Button type="submit">Submit</Button>
</div>
</form>
</div>
<Link to="/venueregister" style={{ textDecoration: "none" }}>
<Button>Register a venue</Button>
</Link>
</div>
</>
);
}
}
export default Login;