state is not updating in react form validation

Question

I am working with simple form validation in react. The problem here is error message is not displaying in while it is showing in console.log! I am quite new to react and stucked here for quite some time. How can I solve this?

I've seen many youtube videos but nothing is working properly.

    const [logindata, setLogindata] = useState({
        customeremail: '',
        customerpass: ''
    })

    const [err, seterr] = useState({
        Email: '',
        Passwordnew: ''
    });

    const handlechange = event => {
        const val = event.target.value
        const name = event.target.name
        setLogindata({ ...logindata, [name]: val })
        console.log(val)

    }

    function login() {
        const NewErr = {...err};
        if (logindata.customeremail == "") {
            NewErr.Email = "Email should not be empty";
            alert(NewErr.Email)
            console.log(NewErr)
        }
    }
  return (
    <>

                    <div className="container">
                        <div className="row">
                            <div className="col-12 col-sm-12 col-md-6 col-lg-6 main-col offset-md-3">
                                <div className="mb-4">
                                    <form method="post" action="home" id="CustomerLoginForm" acceptCharset="UTF-8" className="contact-form">
                                        <div className="row">
                                            <div className="col-12 col-sm-12 col-md-12 col-lg-12">
                                                <div className="form-group">
                                                    <label htmlFor="CustomerEmail">Email</label>
                                                    <input type="email" name="customeremail" placeholder="" id="CustomerEmail" className="" autoCorrect="off" autoCapitalize="off" autoFocus="" onChange={handlechange} value={logindata.customeremail} required = {true} />
                                                </div>
                                                <div className="alert alert-danger" role="alert">
                            {seterr.Email}
                        </div>
                                            </div>
                                            <div className="col-12 col-sm-12 col-md-12 col-lg-12">
                                                <div className="form-group">
                                                    <label htmlFor="CustomerPassword">Password</label>
                                                    <input type="password" name="customerpass" placeholder="" id="CustomerPassword" className="" onChange={handlechange} value={logindata.customerpass} />
                                                </div>
                                            </div>
                                        </div>
                                        <div className="row">
                                            <div className="text-center col-12 col-sm-12 col-md-12 col-lg-12">
                                                <input type="button" style={{ backgroundColor: '#000', color: '#fff' }} className="btn mb-3" value="Sign In" onClick={login} />
                                                <p className="mb-4">
                                                    <a href="#" id="RecoverPassword">Forgot your password?</a> &nbsp; | &nbsp;
                                                    <a href="register.html" id="customer_register_link">Create account</a>
                                                </p>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
    </>

Answer 1

There are 2 problem in your code

1. Not setting state

You are not setting state for err using seterr as:

if (logindata.customeremail == '') {
    NewErr.Email = 'Email should not be empty';
    alert(NewErr.Email);
    console.log(NewErr);
    seterr(NewErr);     // MISSING
}

CODESANDBOX LINK

2. Showing error message with wrong way

When you use useState then it will give you an array of value and function through which you can update the value and on change of the value it will re-render it. You have to use err obj not the function seterr.

You should use {err.Email}} instead of {seterr.Email}}

<div className='alert alert-danger' role='alert'>
    {/* {seterr.Email} */}
    {err.Email}
</div>;