Validate Material UI TextField Submit

Question

I'm trying to validate my email and password TextField(s) for a user logging in. I'm able to catch errors via my handleSubmit function, but unsure of how to implement those errors into the MaterialUI error and helperText fields.

Note, I'm using both material-ui and react-bootstrap, that's why they're mixed.

Login.js - where the email and password TextField(s) are

import React, { Component } from 'react';

import firebase from '../firebase';

import { FiLogIn } from 'react-icons/fi';

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField'

import Form from 'react-bootstrap/Form';
import Col from 'react-bootstrap/Col';

export class Login extends Component {
    state = {
        email : "",
        password : ""
    };
    handleChange = (e) => {
        const { id, value } = e.target
        this.setState(prevState => ({
            ...prevState,
            [id] : value
        }))
    };
    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };
    render() {
        const { email, password } = this.state;
        return (
            <>
                <Form className="sign-in-form">
                    <Form.Row className="align-items-center">
                        <Col xs="auto">
                            <Form.Group controlId="email">
                                <Form.Label srOnly>Email Address</Form.Label>
                                <TextField
                                    id="email"
                                    label="Email"
                                    type="email"
                                    variant="outlined"
                                    aria-describedby="emailHelp"
                                    placeholder="Enter email"
                                    value={email}
                                    onChange={this.handleChange}
                                    
                                />
                            </Form.Group>
                        </Col>
                        <Col xs="auto">
                            <Form.Group controlId="password">
                                <Form.Label srOnly>Password</Form.Label>
                                <TextField
                                    id="password"
                                    label="Password"
                                    variant="outlined" 
                                    type="password"
                                    placeholder="Enter password"
                                    value={password}
                                    onChange={this.handleChange}
                                />
                            </Form.Group>
                        </Col>
                    </Form.Row>
                </Form>
                <Button variant="contained" color="primary" className="login" type="submit" onClick={this.handleSubmit}><FiLogIn className="loginIcon" /> Login</Button>
            </>
        )
    }
}

handleSubmit Function - where firebase validation errors are caught

    handleSubmit = (e) => {
        e.preventDefault();

        const { email, password } = this.state;
        firebase
        .auth()
        .signInWithEmailAndPassword(email, password)
        .then((user) => {
            // User is signed in
        })
        .catch((error) => {
            // Error
        });
    };

Let me know of what I can do here, I'm relatively new with React and always looking to learn new things.

Answer 1

Try this approach:

add an error state to your component:

state =  {
        email : "",
        password : "",
        error : false,
        errMsg : "" 
    };

then change it when error is thrown from the firebase auth action inside handleSubmit:

.catch((error) => {
            this.state = {error : true, errMsg: error.msg};
        });

last, add a conditional TextField to show the error message:

{error &&    <TextField
              error
              id="yourErrorId"
              helperText=this.state.errMsg
              variant="outlined"
            />}

Answer 2

Make an state for error:

state = {
    email : "",
    password : "",
    error:"",
};

Change it on catching error:

    .catch((error) => {
        this.setState({error: error.response.data}) // change it to your error response 
    });

And your input should be something like this:

<FormControl error={error}>
    <InputLabel htmlFor="email">Email</InputLabel>
    <Input
      id="email"
      value={email}
      onChange={this.handleChange}
      aria-describedby="email"
    />
   <FormHelperText id="email"> {error ? error : "Enter your email address"}</FormHelperText>
</FormControl>

Remember to clear error state with handleChange.