React state changes when its assigned variable changes

user_10511205 0
Viewed 4286

I am stuck with a strange issue with React.

this.state={
      testState: { testValue: "Test State" }
}
   
testFn = () => {
        let a;
        a = this.state.testState
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }

If I have made any change in the assigned variable a, then it will reflect in the state also.

What I got in console is,

{testValue: "Debugging is awesome"}.

Any help will be appreciable

Edit: I don't want to change the state. I have to modify a without altering the state. How can I achieve this?

reactjs state javascript
7 Answers

The state changes because your variable a holds a reference to testState. This is a no-op. You should never change it directly and only use the setState function provided by react.

this.setState({ testState: { testValue: "Debugging is awesome" } });

If you don't want to change the state you can use the spread operator:

let a = { ...this.state.testState };
user_11410630

Why does it act this way?

It's because objects and arrays in JavaScript are reference values. Wherever you update its value, it also updates the source. In this case, you'd want to make it immutable. You would do that by assigning a new object. In ES6 this can be done with the spread operator.

Solution

let a = { ...this.state.testState };

Further reading

user_17727600

You have to deep copy the state if you don't want it to be effected (Object.assign):

this.state={
  testState: { testValue: "Test State" }
}

testFn = () => {
    let a;
    a = Object.assign({}, this.state.testState);
    a.testValue = "Debugging is awesome";
    console.log(this.state.testState)
}

Or you can use {...this.state.testState} instead of Object.assign

Note that using the spread operator {...} will not keep the prototype property (instanceof).

user_104445570

You can use the spread operator to create a copy of an object

const newObj = {...obj};
user_30648930

Using JS, when you affect an object to a variable (here, testState), it is passed by reference (See here for further explanation).

This means that if you modify the object through one of the variables, every variable referencing the source will have the change applied.

To solve your problem, you can use the spread operator, which copies the object without referencing it directly:

let a = {...this.state.testState}
user_72097360

try:

this.state={
      testState: { testValue: "Test State" }
}

testFn = () => {
        const a = { ...this.state.testState };
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }
user_83382030

You have to use spread operator (...) for this instead of assigning directly.

this.state={
      testState: { testValue: "Test State" }
}
   
testFn = () => {
        let a;
        a = {...this.state.testState}
        a.testValue = "Debugging is awesome";
        console.log(this.state.testState)
    }
    
testFn()

user_66595230
Related