Object within state is changing without being prompted - reactjs

Question

I'm using setState to update a particular object but for some reason, another object is being mutated as well even though I haven't added it in the setState function.
Basically I have an 'add to cart' function, if item already exists in cart state object, just increments it's quantity by 1. If not, update state of cart with a copy that contains said item.
this.state = {
items: {
0: { name: 'Red shirt', price: 10 },
1: { name: 'Blue shirt', price: 11 },
2: { name: 'Green shirt', price: 12 },
3: { name: 'Yellow shirt', price: 13 }
},
cart: {},
user: {}
}
addToCart = (key, item) => {
let newCart;
newCart = this.state.cart;
// item already exists in cart
if (newCart[key]) {
// increment qty of added item
newCart[key].qty++;
// does not exist, need to add to cart
} else {
newCart[key] = item;
newCart[key].qty = 1;
}
this.setState({ cart: newCart });
}
render() {
const { cart, items } = this.state;
return (
<div className="App">
<h1>Streat</h1>
<Checkout cart={cart} />
<Items
items={items}
addToCart={this.addToCart}
/>
</div>
);
}
}
// Items component which holds Item component
class Items extends Component {
constructor(props) {
super(props)
}
render() {
const { items, addToCart } = this.props;
return (
<div>
{
map(items, function renderItems(item, key) {
return <Item
item={item}
itemRef={key}
key={key}
addToCart={addToCart} />
})
}
</div>
)
}
}
// Item functional component which has the add to cart button
const Item = (props) => {
const { item, itemRef, addToCart } = props;
return (
<div>
<p>{item.name}</p>
<p>{item.price}</p>
<p>{item.qty || ""}</p>
<button onClick={() => addToCart(itemRef, item)}>Add</button>
</div>
)
}
When inspecting the state of my items object in react developer tools, I see that every time I click the button to add an item to the cart, it does correctly add the item to the cart / update the quantity of the item but it also updates the item in the items object in my state, adding a 'qty' key/ value pair which is not what I want.
I'm using setState on my cart object but my items object is being changed too for some reason.

Answer 1

Try to update your state by using spread syntax so you don't get into this kind of trouble. Redux also uses that a lot. By doing it you don't mutate your object and create a clean copy of them.
Your code is not copying the item on line (newCart[key] = item;). Instead, it is putting a reference from the same item and by changing the qty in the next line you consequently update it as well in the items key.
const Item = ({ name, price, onClick }) =>
<div onClick={onClick}>
{name} {price}
</div>
class App extends React.Component {
constructor() {
super()
this.state = {
items: {
0: { name: 'Red shirt', price: 10 },
1: { name: 'Blue shirt', price: 11 },
2: { name: 'Green shirt', price: 12 },
3: { name: 'Yellow shirt', price: 13 }
},
cart: {},
user: {}
}
}
addToCart(key, item) {
const hasItem = this.state.cart[key]
this.setState({
...this.state,
cart: {
...this.state.cart,
[key]: {
...(hasItem ? this.state.cart[key] : item),
qty: hasItem ? this.state.cart[key].qty + 1 : 1,
},
},
})
}
render() {
const { cart, items } = this.state
return (
<div>
<div>Click to add:</div>
{Object.keys(items).map(key =>
<Item
{...items[key]}
key={key}
onClick={this.addToCart.bind(this, key, items[key])}
/>
)}
<div style={{ marginTop: 20 }}>
{Object.keys(cart).map(key =>
<div key={key}>{cart[key].name}:{cart[key].qty}</div>
)}
</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>