How to fix React Form input not hiding validation errors

Question

I am trying to do vanilla form validation in React. However the implementation shows errors on form submission when the inputs don't have the correct values.

here is my code:

export class MemberVerification extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            memberId: '',
            firstName: '',
            lastName: '',
            emailAddress: '',
            memberIdError: '',
            firstNameError: '',
            lastNameError: '',
            emailAddressError: '',
        };
    }

    validate = () => {
        let memberIdError= 'Member ID can\'t be empty';
        let firstNameError= 'First Name can\'t be empty';
        let lastNameError= 'Last Name can\'t be empty';
        let emailAddressError = 'Email Address can\'t be empty';

        if(!this.state.memberId){
            memberIdError = 'Member ID can\'t be empty';
        }

        if(!this.state.firstName){
            firstNameError = 'First Name can\'t be empty';
        }

        if(!this.state.lastName){
            lastNameError = 'Last Name can\'t be empty';
        }        

        if(!this.state.emailAddress.includes('@')) {
            emailAddressError= 'Email Address can\'t be empty';
        }

        if(memberIdError || firstNameError || lastNameError, emailAddressError){
            this.setState({memberIdError, firstNameError, lastNameError, emailAddressError });
            return false;
        }

        return true;
    }

    handleContinueButton = (e) => {
        e.preventDefault();
        // const { memberId, firstName, lastName, emailAddress } = this.state;
        //const errors = this.validate(memberId, firstName, lastName, emailAddress)
        const isValid = this.validate();
        // if (errors.length > 0) {
        //     this.setState({ errors });
        // }
        if(isValid){
            const dataFromState = this.state;
            const postingDataFromInterstitial = this.props.memberVerificationInterstitialData;
            const baseURL = postingDataFromInterstitial.postEndpoint;

            const postingData = {
                "emailAddress": dataFromState.emailAddress,
                "firstName": dataFromState.firstName,
                "lastName": dataFromState.lastName,
                "memberId": dataFromState.memberId
            }
            this.props.postMemberVerificationFormData(postingData, baseURL);
        }

        renderMemberInfoForm() {
            return (
                <form onSubmit={this.handleContinueButton}>
                    {/* {this.state.errors.map(error => (
                        <p className="errorListMV" key={error}>Error: {error}</p>
                    ))} */}
    
                    <div className="row">
                        <div className="small-12 large-5 medium-5 columns">
                            <label>
                                <FormattedMessage id='memberVerification.form.idNumber' />
                            </label>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-5 medium-5 columns">
                            <input
                                type="text"
                                name="memberID"
                                value={this.state.memberId}
                                onChange={this.handleMemberIdChange}
                            />                                            
                            <p className="errorListMV">{this.state.memberIdError}</p>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-6 medium-6 columns">
                            <div className="row">
                                <div className="small-12 large-6 medium-6 columns">
                                    <div className="row">
                                        <div className="small-12 large-12 medium-12 columns">
                                            <label>
                                                <FormattedMessage id='memberVerification.form.firstName' />
                                            </label>
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="small-12 large-12 medium-12 columns">
                                            <input
                                                type="text"
                                                name="firstName"
                                                value={this.state.firstName}
                                                onChange={this.handleFirstNameChange} 
                                            />
                                            <p className="errorListMV">{this.state.firstNameError}</p>
                                        </div>
                                    </div>
                                </div>
                                <div className="small-12 large-6 medium-6 columns">
                                    <div className="row">
                                        <div className="small-12 large-12 medium-12 columns">
                                            <label>
                                                <FormattedMessage id='memberVerification.form.lastName' />
                                            </label>
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="small-12 large-12 medium-12 columns">
                                            <input
                                                type="text"
                                                name="lastName"
                                                value={this.state.lastName}
                                                onChange={this.handleLastNameChange} />
                                                <p className="errorListMV">{this.state.lastNameError}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-5 medium-5 columns">
                            <label>
                                <FormattedMessage id='memberVerification.form.emailAddress' />
                            </label>
                        </div>
                    </div>
                    <div className="row">
                        <div className="small-12 large-5 medium-5 columns">
                            <input
                                type="text"
                                name="emailAddress"
                                value={this.state.emailAddress}
                                onChange={this.handleEmailChange}
                            />
                            <p className="errorListMV">{this.state.emailAddressError}</p>
                        </div>
                    </div>
                    <div>
                        <button className="backButton" type="button" onClick={this.handleBackButton}><FormattedMessage id='form.backButton' /></button>
                        <button className="continueButton" type="submit"><FormattedMessage id='form.continueButton' /></button>
                    </div>
                </form>
            );
        }

    }
}

But when I put in the correct values the errors still show on form submission. What am I doing wrong?

Answer 1

Reset the error state before each validation

  validate = () => {
    let memberIdError= '';
    let firstNameError= '';
    let lastNameError= '';
    let emailAddressError = '';

    if(!this.state.memberId){
        memberIdError = 'Member ID can\'t be empty';
    }

    if(!this.state.firstName){
        firstNameError = 'First Name can\'t be empty';
    }

    if(!this.state.lastName){
        lastNameError = 'Last Name can\'t be empty';
    }        

    if(!this.state.emailAddress.includes('@')) {
        emailAddressError= 'Email Address can\'t be empty';
    }

    if(memberIdError || firstNameError || lastNameError || emailAddressError){
        this.setState({memberIdError, firstNameError, lastNameError, emailAddressError });
        return false;
    }

    return true;
}

Here we are resetting error states to empty string '', in each validation