React state changes when its assigned variable changes

Question

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?

Answer 1

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 };

Answer 2

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

• Mozilla Web Docs: Spread syntax

Answer 3

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).

Answer 4

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

const newObj = {...obj};

Answer 5

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}

Answer 6

try:

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

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

Answer 7

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()