javascript - setState hook changing another state

Question

I'm new to React. I'm having the next problem...

At my functional component I have many states, there are 2 that have the sames fields (one is for an auxiliary operation)

const [fieldsToEdit, setFieldsToEdit] = useState({}); // This one get populated after the first render
const [auxFields, setAuxFields] = useState({.....})

Now, I have a button that calls a function, this functions just edits the 'fieldsToEdit', but it is editing the auxFields too! I realized this writing console.logs after and before of the setState call.

const updateEditHandler = (event) => {
  event.persist());


     setFieldsToEdit((prevState) => {
           const { name, value } = event.target;
           if(name === "fecha_presentacion")
              prevState[name] = value;
           else
              prevState[name] = Number(value);
           return ({
              ...prevState
         });
}

Am I doing it wrong? Hope you can help me.

question from:https://stackoverflow.com/questions/65831278/setstate-hook-changing-another-state

Answer 1

You should not mutate state. Instead create a new object without modifying the previous one.

prevState[name] = value; 
return { ...prevState };

The above first mutates the previous state, then returns a copy of it. Instead return a copy that contains the new value without modifying the previous state.

return { ...prevState, [name]: value };

The above copies the previous state and adds or overrides the (evaluated) name property with value. This is all done without mutating prevState.

Applying this to your actual code you would get the following.

setFieldsToEdit((prevState) => {
  const { name, value } = event.target;
  
  if (name == "fecha_presentacion") {
    return { ...prevState, [name]: Number(value) };
  } else {
    return { ...prevState, [name]: value };
  }
});

// or (depending on preference)
setFieldsToEdit((prevState) => {
  let { name, value } = event.target;
  if (name == "fecha_presentacion") value = Number(value);
  return { ...prevState, [name]: value };
});