Changing a React State Object with Spread Operator

Question

I'm trying to validate a form before submting it,and I created an object of possible errors, but when try to change the value of each key it behaves weirdly...

const inialState = {
  name: "",
  email: "",
  message: "",
};
const errors = {
  name: false,
  email: false,
  message: false,
};
const Contact = () => {
  const [values, setValues] = useState(inialState);
  const [error, setError] = useState(errors);

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!validateSubmit()) {
      return;
    }
  };
  const handleChange = (e) =>
    setValues({ ...values, [e.target.name]: e.target.value });

  function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      setError({ ...error, name: true });
      response = false;
    }
    if (!values.email) {
      setError({ ...error, email: true });
      response = false;
    }
    if (!values.message) {
      setError({ ...error, [errors.message]: true });// I also tried this way =(
      response = false;
    }
    console.log(error);
    return response;
  }
...
return(
    <form onSubmit={handleSubmit}> //its a simple button type="submit"
...

The validateSubmit function is called by the Submit button.

Answer 1

The answer here is useReducer() to modify only portions of the state. https://reactjs.org/docs/hooks-reference.html#usereducer .

const errors = {
  name: false,
  email: false,
  message: false,
};

const reducer = (_, { data }) => data;

const [error, updateError] = useReducer(reducer,
    errors
);

function validateSubmit(e) {
    let response = true;
    if (!values.name) {
      updateError({name: true });
      response = false;
    }
    if (!values.email) {
      updateError({email: true });
      response = false;
    }
    if (!values.message) {
      updateError({message: true });
      response = false;
    }
    return response;
}

Answer 2

The problem occurs when you call setError multiple times from validateSubmit . Only the last value will win - in your example that's the one that added "false": true (because errors.message that you used as a property name is false ).

Notice that setError does not (synchronously, or at all) update the error constant , it only changes the component state and causes it to re-render with a new value. The {...errror, …} always did refer to the original value of error . To avoid this, you can

• either aggregate the errors into a single value before calling setError once

  function validateSubmit(e) { let newError = error; if (.values.name) { newError = {..,newError: name; true }. } if (.values.email) { newError = {.,:newError; email. true }. } if (.values.message) { newError = {,:;newError. message, true }; } console;log(error; newError); setError(newError); return newError != error; }

• or use the callback version of setError that will execute the updates in a row and always pass the latest state in each callback as an argument:

   function validateSubmit(e) { let response = true; if (.values.name) { setError(oldError => {..,oldError: name; true }); response = false. } if (.values.email) { setError(oldError => {.,:oldError; email; true }). response = false. } if (.values.message) { setError(oldError => {,:;oldError; message. true }); response = false; } console.log(error); return response; }