react - copy state to local variable without changing its value - reactjs

Question

I have a case that I need to update a value in hierarchy state variable (which consists of 3 tree levels in my case, and I need to update a value in third level for example).
I copied that state variable to local variable and did the update on it, but I noticed that state variable was changed as well!
Searched for it, and saw suggestions for using Object.assign or Spread operator, I tried using the spread but it didn't help with creating a copy of the state to prevent both objects referring to the same reference but it didn't work!
Object.assign appraoch didn't work neither!
Ho can I accomplish that?
const assign = require('object-assign');
// let properties = this.state.configProperties
// let properties = assign({}, this.state.configProperties)
let properties = { ...this.state.configProperties };
properties.Children.forEach((lvl1) => {
lvl1.Properties.forEach((property) => {
if (property.id === id) {
property.value = val;
return;
}
});
lvl1.Children.forEach((lvl2) => {
lvl2.Properties.forEach((property) => {
if (property.id === id) {
property.value = val;
return;
}
});
lvl2.Children.forEach((lvl3) => {
lvl3.Properties.forEach((property) => {
if (property.id === id) {
property.value = val;
return;
}
});
});
});
});

Answer 1

You have to clone the nested level objects/arrays as well, in order to avoid referencing original values.
Here is an example on how to achieve deeply nested objects copying,
import React from "react";
import "./styles.css";
export default function App() {
const state = {
dataOne: {
subDataOne: {
text: "Test",
value: "Test One"
},
subDataTwo: {
text: "Test",
value: "Test One"
}
},
dataTwo: {
subDataOne: {
text: "Test",
value: "Test One"
},
subDataTwo: {
text: "Test",
value: "Test Two"
}
}
};
const clonedState = { ...state };
const clonedData = { ...clonedState.dataOne };
const clonedSubDataOne = { ...clonedData.subDataOne };
clonedSubDataOne.text = "New Test Value";
clonedData.subDataOne = clonedSubDataOne
clonedState.dataOne = clonedData
console.log("Original =>",state)
console.log("Cloned =>",clonedState)
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

Answer 2

You can also use Lodash Library for cloning and many more.
import * as _ from 'lodash';
const copy = _.cloneDeep(object)