React updating the state value in a wrong place

Question

I am trying to implement a simple form validation in React where the length of the name should be more than 1 char long, length of country should be more than 2 char long along with the password. However, the password and the country are getting validated properly. But, the name field isn't getting properly validated. Firstly, it's allowing to submit the name if it's just 1 char long and instead is showing the error in the country's span tag. Also, I am not sure how to implement the logic for email validation. Here is my code:

import React, { Component } from "react";


export default class SignUp extends Component {
    constructor(){
        super();
        this.state={
            name:'',
            country:'',
            email:'',
            pass:'',
            formErrors:{
                nameError:'',
                countryError:'',
                emailError:'',
                passwordError:''
            }
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleValidate=this.handleValidate.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    handleChange =(e) =>{
        let name=e.target.name;
        let value=e.target.value;
        this.setState({
            [name]:value
        })
    }

    handleValidate= () =>{
        let { name,country,email,pass} =this.state;
        let nameError, countryError, emailError, passError;

        if(!name)
            nameError="Missing name"
        if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

        if(!country)
            countryError="Missing country"
        if(country && country.length<3)
            countryError="Length of country should be more than 2 characters"

       /* if(!email)
            emailError="Email can't be empty"
        let lastAtPosi=email.lastIndexOf('@');
        let lastDotPosi=email.lastIndexOf('.');
        console.log("last @ posti"+lastAtPosi);
        console.log("Last . posi"+lastDotPosi);
        */

        if(!pass)
            passError="Password can't be empty"
        if(pass && pass.length<6)
            passError="Password must be more than 6 characters long"

        this.setState({
            formErrors:{
                nameError:nameError,
                countryError:countryError,
               // emailError:emailError,
                passwordError:passError
            }
        })
        console.log("name "+nameError);
    }

    handleSubmit= (e) =>{
        e.preventDefault();
       this.handleValidate();
    }

    render() {
        const { name, country, email, pass, formErrors } = this.state;
        return (
            <div>

            <form>
                <h3>Sign Up</h3>
                <div className="form-group">
                    <label>Name</label>
                    <input type="text" onChange={this.handleChange}name="name"value={name} className="form-control" placeholder="Enter name" />
                    {formErrors.nameError? <span variant="danger">{formErrors.nameError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Country</label>
                    <input type="text" onChange={this.handleChange}name="country"value={country} className="form-control" placeholder="Enter country" />
                   {formErrors.countryError? <span variant="danger">{formErrors.countryError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" onChange={this.handleChange}name="email"value={email} className="form-control" placeholder="Enter email" />
                    {formErrors.emailError?<span variant="danger">{formErrors.emailError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" onChange={this.handleChange}name="pass" value={pass} className="form-control" placeholder="Enter password" />
                    {formErrors.passwordError?<span variant="danger">{formErrors.passwordError}</span>:'valid'}
                </div>

                <button onClick={this.handleSubmit}type="submit" className="btn btn-primary btn-block">Sign Up</button>

            </form>
            </div>
        );
    }
}

Sandbox linkenter link description here

Answer 1

In your handleValidate, you assign an error to the wrong error variable:

if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

It should be:

if(name && name.length<2)
            nameError="Length of name should be more than 1 character"