React Hooks, state not updating

Question

I m new to react and js.

import React from "react";
import { useState, useEffect } from "react";

const Forminput = () => {
  const [errors, setErrors] = useState({}); //state values
  const [values, setValues] = useState({
    username: "",
    email: "",
  }); //state values

  const change = (e) => {
    const { name, value } = e.target;
    setValues({
      ...values,
      [name]: value,
    });
  };

  const submitChange = (e) => {
    e.preventDefault();

    console.log(values);
    setErrors(validation(values));
    console.log(errors);
  };

  const validation= (values) => {
    if (!values.username.trim()) {
      errors.username = "Username required";
    }

    if (!values.email) {
      errors.email = "Email required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = "Email address is invalid";
    }

    return errors;
  };

  useEffect(() => {}, [errors]);

  return (
    <div>
      <h2>Create Your Form </h2>
      <form action="" className="form-inputs" onSubmit={submitChange}>
        <div className="username">
          <label htmlFor="username" className="username">
            Username
          </label>
          <input
            id="username"
            type="text"
            className="username"
            name="username"
            onChange={change}
            value={values.username}
          />
          {errors.username && <p>{errors.username}</p>}
        </div>

        <div className="email">
          <label htmlFor="email" className="email">
            email
          </label>
          <input
            id="email"
            type="text"
            name="email"
            className="email"
            onChange={change}
            value={values.email}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>

        <input type="submit" className="signup" />
      </form>
    </div>
  );
};

setErrors state is not updating.

1. Two fields username and email. when entered username and not email first for time the errors state is updating.
2. when entered again right email then press submit it is not updating the error state but updating the values state. i tried using useeffect() but not working.

i new here could you please me.

I want to update the errors state too when i update values state. is this right way or help me

Answer 1

This happens because you're mutating the errors object in validation and setting the same errors object when you call setErrors in submitChange. Since errors is the same object reference, this doesn't trigger a re-render. You'll need to return a new object from validation:

  const validation= (values) => {
    const result = {};

    if (!values.username.trim()) {
      result.username = "Username required";
    }

    if (!values.email) {
      result.email = "Email required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      result.email = "Email address is invalid";
    }

    return result;
  };