React - Why does state object get updated when I update a restructured copy of state?

Question

I've got a form in React, which I need to convert to a different data structure.

The form has the data structure as below -

const [form, useForm] = useState([
    {
      id: 1,
      title: "Section",
      url: "testLink",
      content: [{ id: 3, title: "", url: "" }]
    },
    {
      id: 2,
      title: "Section",
      url: "testLink",
      content: [{ id: 4, title: "", url: "" }]
    }
  ]);

When the user hits submit, I need to delete id property as this is not accepted from the backend.

I'm trying to do this in the following example -

const handleSubmit = (event) => {
    const formData = [...form];
    formData.map((item) => {
      delete item.id;
    });
    console.log(form);
    console.log(formData);
  };

I'm expecting the form and the formData objects to have different properties (formData wouldn't have the id, but form would).

I'm not sure what I'm doing wrong here? Here's a demo from CodeSandbox (I did slightly modify this to get it working asap) - https://codesandbox.io/s/elated-noether-xcr6r?file=/src/App.js

Thanks for taking the time to look into this!

`[...form]` is a _shallow_ copy. Also don't use map when you're not using the array it creates. — jonrsharpe, Jun 15 '21 at 15:30
I was thinking about using formData to submit to the backend. Is there a better solution to this? — theabrar, Jun 15 '21 at 15:36
Does this answer your question? [Remove property for all objects in array](https://stackoverflow.com/a/46839399/1218980) — Emile Bergeron, Jun 15 '21 at 17:24

score 0 · Answer 1 · answered Jun 15 '21 at 16:09

The spread operator creates a shallow copy of your form object, so when you modify the formData which is referring to the same object form is referring to, it will update the underlying object. Instead, create a deep copy of the form object using lodash's cloneDeep utility.

import cloneDeep from 'lodash/cloneDeep';

const formData = cloneDeep(form);

https://lodash.com/docs/4.17.15#cloneDeep

score 0 · Accepted Answer · answered Jun 15 '21 at 16:17

You will have to clone the object. The easiest way is to parse it to Json and parse it back to object.

See below

  const modifyObject = (event) => {
    const formData = form.map(x=> JSON.parse(JSON.stringify(x)))
    formData.map((item) => {
      delete item.id;
    });
    console.log(form);
    console.log(formData);
  };

There is also other way you could clone the object. read here https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

React - Why does state object get updated when I update a restructured copy of state?

2 Answers2