Bug: Changes made to an array in useState also affect its copy about react

[eps1lon]

Support requests filed as GitHub issues often go unanswered. We want you to find the answer you're looking for, so we suggest the following alternatives:

Coding Questions
If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.

https://stackoverflow.com/questions/tagged/react

Talk to other React developers
There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.

https://reactjs.org/community/support.html

[tankotun]

Problem is solved by updating state in different way.

setOriginal(prevState =>
  prevState.map((x, i) =>
    i == 0 ? {...x, name: e.target.value } : x
  )
)

[adbutterfield]

To get to the root of your problem, in JavaScript objects are passed by reference not by value. So when you call submit you're setting the value of copy to a reference of the original object.

You can test it by adding this snippet to your sandbox:

  useEffect(() => {
    console.log("original[0] === copy[0]", original[0] === copy[0]);
  }, [original[0], copy[0]]);

Initially original[0] === copy[0] will be false. After you submit, original[0] === copy[0] will be true.