React state is getting updated when its assigned variable is changed or updated

I have a state formData in which mappedColumn is one of the object as below

const [formData, setFormData]=useState({
               mappedColumns:[
               {
                 source:"MAIN SOURCE",
                 target:"MAIN TARGET",
                 transformationValue:"MAIN VALUE"
               }
              ]
            })

var targetIndex = 0;
let mappingConfig = [...formData.mappedColumns];
var mIndex = mappingConfig.findIndex(function(p){ return p.target== targetIndex})
mappingConfig[mIndex].source = 'source';
mappingConfig[mIndex].transformationValue = 'value';

When I made any changes to the variable mappingConfig the actual state variable formData.mappedColumns is getting updated with whatever values are assigned to mappingConfig. Why is it happening so. What is the soluion for this. Anyone please help !!

>Solution :

The behavior you’re describing is likely due to the fact that objects in JavaScript are assigned by reference, not by value. When you perform let mappingConfig = […formData.mappedColumns];, you are creating a shallow copy of the array, but the objects within the array are still references to the same objects in memory. Therefore, when you modify properties of objects in mappingConfig, you’re actually modifying the same objects in formData.mappedColumns.

To avoid this issue, you should create a deep copy of the objects within the array to ensure that changes to one object do not affect the other. One way to achieve a deep copy is to use the spread operator for both the array and the objects within it.

Here’s an example of how you can create a deep copy in your case:

 const [formData, setFormData] = useState({
  mappedColumns: []
});

var targetIndex = 0;
let mappingConfig = formData.mappedColumns.map(obj => ({ ...obj })); // Deep copy

var mIndex = mappingConfig.findIndex(function (p) {
  return p.target === targetIndex;
});

mappingConfig[mIndex].source = 'source';
mappingConfig[mIndex].transformationValue = 'value';

// Now update the state with the new array
setFormData({
  ...formData,
  mappedColumns: mappingConfig
});

In this example, map(obj => ({ …obj })) is used to create a new array with deep-copied objects. This way, changes to mappingConfig won’t affect the original formData.mappedColumns. Finally, when updating the state using setFormData, you create a new object with the updated mappedColumns array to ensure that the state update triggers a re-render.