ReactJs Updating state of similar property value - arrays

Question

I have two variable a and b in state. which are both copied one constant variable.(all are nested array).
Whenever i try to update a, it update b also, i dont know what the problem?
See The codesandbox demo: https://codesandbox.io/s/busy-maxwell-xvu5w
Code:
import React from "react";
const filterAttributes = [
{
name: "gender",
searchable: false,
search: "",
values: ["Male", "Female", "Child", "Other"]
},
{
name: "size",
searchable: false,
search: "",
values: ["30", "35", "15", "55", "10"]
},
{
name: "brand",
searchable: true,
search: "",
values: [
"Amazon",
"Flipkart",
"Apple",
"Vivo",
"Oppo",
"Samsung",
"Twitter"
]
}
];
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
a: [...filterAttributes],
b: [...filterAttributes]
};
}
changeA = () => {
let a = [...filterAttributes];
a[0].search = "d-1--d";
this.setState({ a: [...a] });
};
render() {
return (
<div>
<pre style={{ maxWidth: "100%", overflowX: "scroll" }}>
<div>A: {JSON.stringify(this.state.a)}</div>
<hr />
<div>B: {JSON.stringify(this.state.b)}</div>
</pre>
<button onClick={this.changeA}>Change A</button>
<button>Change B</button>
</div>
);
}
}

Answer 1

let a = this.state.a;
a[0] = { ...a[0], ...{ search: "3-1--d" } };
this.setState({ a });
Using the spread operator we can make a copy of the object as well. Since this only shallow clones, it will only go one level deep.

Answer 2

The spread operator only goes one level deep (Shallow Copying).This means that the objects in your array are still referenced. I would recommend using lodash for deep copies but also a custom way like this works:
this.state = {
a: JSON.parse(JSON.stringify(filterAttributes)),
b: JSON.parse(JSON.stringify(filterAttributes))
};