React Copy Array using Spread Operator Not working

Question

I am workng with react js state i have a fake array in my state name jObj i am copying it using spread operator into variable copy and after that updating jObj using function expandArray don't know why copy variable updating here is my both functions

 fakeMethod=()=>{
        let  jObj=[];
        jObj[0]=[];
        jObj[0]['id']=1;
        jObj[0]["title"]="parent Object";
        jObj[0]['parentId']=[];
        jObj[0]['options']=[];
        jObj[0]['options'][0]=[];
        jObj[0]['options'][0]['name']="Yes";
        jObj[0]['options'][0]['value']="yes";
        jObj[0]['options'][0]['id']=3;
        jObj[0]['options'][1]=[];
        jObj[0]['options'][1]['name']="No";
        jObj[0]['options'][1]['value']="no";
        jObj[0]['options'][1]['id']=4;
        jObj[1]=[];
        jObj[1]['id']=1;
        jObj[1]["title"]="child Object";
        jObj[1]['parentId']=[3,4];
        jObj[1]['options']=[];

        const copy=[...jObj]
        jObj=this.expandArray(jObj);
        console.log("This is orignal object")
        console.log(jObj);
        console.log("This is copy object")
        console.log(copy)
        return ""
    }
    expandArray=(input)=>{
        let result = input.map(a => a.id);
        var max_of_array = Math.max.apply(Math, result);
        var newArr = [];
        for (var i in input) {
            var first = true;
            let objCopy = Object.assign({}, input[i].parentId);
            input[i]=Object.assign(input[i],{"initObjectPos":i});
            if(input[i].parentId.length == 0){
                input[i].parentId="";
            }
            for (var x in objCopy) {
                var y = input[i];

                if (!first) {
                    y = Object.assign({}, y);
                    max_of_array++;
                    y.id = max_of_array.toString();
                    newArr.push(y);
                }
                y.parentId = objCopy[x];
                first = false;
            }
        }
        var output = input.concat(newArr);
        return output;
    }

please help me about where i am wrong i think i am copying array correctly and something is wrong inside expand array function Thanks Much!!

nir shabi · Accepted Answer · 2020-09-01 13:15:41Z

2

The spread operator will not create a deep clone of your Object. Since some of your object's properties are objects themselves, their copy will be passed by reference. If you will change one of their attributes, your first Object will be changed again. The easiest way to avoid this is to you use lodash's cloneDeep method. Lodash Documentation

const copy=cloneDeep(jObj)

answered Sep 1, 2020 at 13:15

nir shabi

3671 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deepak Verma · Accepted Answer · 2020-09-01 13:04:05Z

1

the problem is that you're creating an empty array, not an array of objects in the fakeMethod(). if you look into the following code, you'll find the mistake while creating jObj[0], jObj[1], jObj[0]['options'][0];

    let  jObj=[];
    jObj[0]={};
    jObj[0]['id']=1;
    jObj[0]["title"]="parent Object";
    jObj[0]['parentId']=[];
    jObj[0]['options']=[];
    jObj[0]['options'][0]={};
    jObj[0]['options'][0]['name']="Yes";
    jObj[0]['options'][0]['value']="yes";
    jObj[0]['options'][0]['id']=3;
    jObj[0]['options'][1]={};
    jObj[0]['options'][1]['name']="No";
    jObj[0]['options'][1]['value']="no";
    jObj[0]['options'][1]['id']=4;
    jObj[1]={};
    jObj[1]['id']=1;
    jObj[1]["title"]="child Object";
    jObj[1]['parentId']=[3,4];
    jObj[1]['options']=[];

answered Sep 1, 2020 at 13:04

Deepak Verma

712 bronze badges

1 Comment

shan Over a year ago

when using you code getting same result you can put you code in my code and check result

vfxandy · Accepted Answer · 2024-02-01 02:38:44Z

1

As of 2024 probably the best method is to use the native structuredClone() method introduced in ES2019

This will copy your array without any references

So instead of:

const copy=[...jObj]

Use:

const copy=structuredClone(jObj)

More information and a polyfill for older browsers can be on this SO answer

answered Feb 1, 2024 at 2:38

vfxandy

112 bronze badges

Collectives™ on Stack Overflow

React Copy Array using Spread Operator Not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related