I am trying to implement a simple e-commerce application where I have a home component and a cart component whenever I call handle increment or handle decrement, quantity variable is increased or decreased twice in both cart array and items array.so {item.quantity} changes 0,2,4 and so on and this is happening on both cart page and home page. I feel like this has something to do with not using spread operator properly while updating an object in an array.
please help me understand why is this happening and how to resolve it.
Here is my code
shop.jsx
import React, { Component } from 'react';
import Navbar from './nav';
import Cart from './cart';
import Home from './home';
import { Switch, Route } from 'react-router-dom';
class Shop extends Component {
state = {
items: [],
cart: []
}
componentDidMount() {
let items = [...this.state.items];
items.push({ id: 1, name: "product1", price: 100, quantity: 0 });
items.push({ id: 2, name: "product2", price: 200, quantity: 0 });
this.setState({ items });
}
handleIncrement = (item) => {
console.log('handle increment called');
let items = [...this.state.items];
let cart = [...this.state.cart];
let productIndex = items.indexOf(item);
let cartIndex = cart.indexOf(item);
items[productIndex].quantity += 1;
if (cartIndex === -1) {
item.quantity += 1;
cart.push(item);
}
else {
cart[cartIndex].quantity += 1;
}
this.setState({ cart, items });
}
handleDecrement = (item) => {
console.log('handle decrement called');
let items = [...this.state.items];
let cart = [...this.state.cart];
let productIndex = items.indexOf(item);
let cartIndex = cart.indexOf(item);
items[productIndex].quantity -= 1;
cart[cartIndex].quantity -= 1;
this.setState({ cart, items });
}
render() {
return (
<div>
<Navbar />
<Switch>
<Route path="/home" render={(props) => <Home
items={this.state.items}
handleAdd={this.handleAdd}
handleIncrement={this.handleIncrement}
handleDecrement={this.handleDecrement}
{...props} />} />
<Route path="/cart" render={(props) => <Cart
cart={this.state.cart}
handleIncrement={this.handleIncrement}
handleDecrement={this.handleDecrement}
{...props} />} />
</Switch>
</div>
);
}
}
export default Shop;
Home.jsx
import React from 'react';
const Home = (props) => {
return (
<div>
Home
<ul>
{props.items.map((item) => {
return (
<li key={item.id}>
{item.name} <br />
{item.price} <br />
{
item.quantity === 0 ?
<button onClick={() => props.handleIncrement(item)}>add</button> :
<div>
<button onClick={() => props.handleDecrement(item)}>-</button>
<button>{item.quantity}</button>
<button onClick={() => props.handleIncrement(item)}>+</button>
</div>
}
</li>
)
})
}
</ul>
</div>
);
}
export default Home;
cart.jsx
import React from 'react';
const Cart = (props) => {
return (
<div>
cart
<ul>
{props.cart.map((item) => {
return (
<li key={item.id}>
{item.name} <br />
{item.price} <br />
{item.quantity} <br />
{item.price * item.quantity}
</li>
)
})}
</ul>
</div>
);
}
export default Cart;
nav.jsx
import React from 'react';
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
<div>
Navbar
<Link to="/home">Home</Link>
<Link to="/cart">Cart</Link>
</div>
);
}
export default Navbar;
