ReactJs: My parent array gets updated after using map function

Question

I'm trying to insert new keys into an array that are basically extracted from the parent array. I can't find a reason why the main array within the store would change just by inserting a new key into the extracted array.

This is how I try to add a new key value pair in a custom array

const array = [{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url"},{"name":"hash_key"}]}]

function runArray(){
let connectorObject= {}
let newArray
if (array.length > 0) {
                connectorObject =
                    array.find(
                        (c) => c.integrationTypeId === 1,
                    );
                newArray = connectorObject.fields
                newArray !== undefined &&
                    newArray.map((object) => {
                        return Object.assign(object, {
                            inputType: "textField",
                            value: object.name,
                        })
                    })
            }
            console.log(JSON.stringify(newArray))
            console.log(JSON.stringify(array))
}

runArray();

The following is the output:

Console 1.: newArray

[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]

Console 2.: Parent array

[{"integrationTypeId":1,"type":"aptus","fields":[{"name":"base_url","inputType":"textField","value":"base_url"},{"name":"hash_key","inputType":"textField","value":"hash_key"}]}]

What makes it modified with newArray value.

Even tried: newArray.map(obj => ({ ...obj, [inputType]: "textField"}));

Answer 1

It is important to know that Javascript arrays and objects are passed by reference. This means that if you modify an array or object, it will be reflected in all references to that array or object.

In this case, Array-->Object-->Array-->Object is too nested. So make sure to create a new array or object when extracting. Here I use ES6 ... syntax to create a new array/object. Simply use = to copy its reference, thus reflecting the changes.

The code below is not optimized yet, but I hope you get the idea.

const array = [
  {
    integrationTypeId: 1,
    type: "aptus",
    fields: [{ name: "base_url" }, { name: "hash_key" }],
  },
];

function runArray() {
  let connectorObject = {};
  let newArray = [];

  if (array.length > 0) {
    connectorObject = {
      ...array.find((c) => c.integrationTypeId === 1), //Creating brand new copy of array object
      fields: [...array.find((c) => c.integrationTypeId === 1).fields], //Creating brand new copy of fields array
    };

    newArray = connectorObject.fields.map((field) => {  //Creating brand new copy of fields array object
      return { ...field };
    });

    newArray.map((object) => {
      Object.assign(object, {
        inputType: "textField",
        value: object.name,
      });
    });
  }
  console.log(JSON.stringify(newArray));
  console.log(JSON.stringify(array));
}

runArray();