ReactJs useState is not working properly with spread operation

Using reactstrap form, I implemented a form with a validation feature but couldn't find the reason why it is not working properly. Validation logic is simple. After a user clicks submit button, it checks the message object, then if there is a null value or its length of the element is less than 2, using useState, it updates the errors object and displays the message under each field. The problem that I found by now is if statement is working fine but setErrors() is not working properly. Could you let me know what I missed here?

import React, { useState } from "react";  import emailjs from "emailjs-com";  import {    Form,    FormGroup,    Label,    Input,    FormFeedback,    Button,  } from "reactstrap";    export const Mailing = () => {    const [message, setMessage] = useState({      username: "",      email: "",      subject: "",      content: "",    });      const [errors, setErrors] = useState({      username: "",      email: "",      subject: "",      content: "",    });      function validationForm(message) {      if (message.username === "" || message.username.length < 2) {            setErrors((errors) => {          return { ...errors, username: "You need to type word more than 2." };        }); <<< Not working        }      if (message.email === "" || message.email.length < 2) {        setErrors({ ...errors, email: "You need to type word more than 2." });    <<< Not working        }      if (message.subject === "" || message.subject.length < 2) {        setErrors({ ...errors, subject: "You need to type word more than 2." });  <<< Not working        }      if (message.content === "" || message.content.length < 2) {        setErrors({ ...errors, content: "You need to type word more than 2." });  <<< Not working        }        console.log(errors);  <<< It returns empty values in the object.        return errors.username == "" &&        errors.email == "" &&        errors.subject == "" &&        errors.content == ""        ? true        : false;    }      const sendEmail = (e) => {      // sending email logic    };      const handleChange = (e) => {      setMessage({ ...message, [e.target.name]: e.target.value });    };      const handleSubmit = (e) => {      e.preventDefault();      if (validationForm(message)) sendEmail(e);    };      return (      <Form onSubmit={handleSubmit}>        <FormGroup controlid="formEmail">          <Label for="exampleEmail">Email</Label>          <Input            type="email"            name="email"            value={message.email}            placeholder="Type your email."            onChange={(e) => handleChange(e)}            invalid={errors.email !== ""}          />          <FormFeedback>{errors.email}</FormFeedback>        </FormGroup>        <FormGroup controlid="formUserName">          <Label for="examplePassword">username</Label>          <Input            type="text"            name="username"            value={message.username}            placeholder="Type your username."            onChange={(e) => handleChange(e)}            invalid={errors.username !== ""}          />          <FormFeedback>{errors.username}</FormFeedback>        </FormGroup>        <FormGroup controlid="formBasicSubject">          <Label className="text-muted">Subject</Label>          <Input            type="text"            name="subject"            className="text-primary"            value={message.subject}            onChange={(e) => handleChange(e)}            placeholder="Type the subject here."            invalid={errors.subject !== ""}          />          <FormFeedback>{errors.subject}</FormFeedback>        </FormGroup>        <FormGroup controlid="formBasicMessage">          <Label className="text-muted">Message</Label>          <Input            type="textarea"            name="content"            className="text-primary"            value={message.content}            onChange={(e) => handleChange(e)}            placeholder="Type the message here."            invalid={errors.content !== ""}          />          <FormFeedback>{errors.content}</FormFeedback>        </FormGroup>        <Button>Submit</Button>      </Form>    );  };    

https://stackoverflow.com/questions/67327881/reactjs-usestate-is-not-working-properly-with-spread-operation April 30, 2021 at 11:37AM