So let's say you are on the product page of a Nike T-shirt, you choose the color and size(eg:black and S) and add it to cart. Now the cart contains 1 Nike T-SHIRT with selectedAttributes: color: black, size: s. Now, while on the same T-shirt page, you choose color white and size M, the previous added T-shirt's attributes change from (color:black into color: white, and form size:s into size:M) and now you have in cart 2 T-SHIRTS SIZE :M AND COLOR: BLACK. What am I doing wrong?
class PDP extends Component {
state = {
currentProduct: this.props.location.state,
selectState: [],
testObj: {},
}
render() {
let product = this.state.currentProduct;
let handleChange = (evt,attribute) => {
const test = Object.assign({}, product);
this.state.testObj[attribute] = evt.target.value;
this.state.selectState.push(this.state.testObj);
let selectedAttributes = [...new Set(this.state.selectState)];
test.selectedAttributes = selectedAttributes;
this.setState((state) => ({
currentProduct: test
}))
}
<button className="addToCart" onClick={() => this.props.data.addProduct(this.state.currentProduct)}>ADD TO CART</button>
addProduct = (product) => {
this.setState((state) => ({
cart: state.cart.concat(product),
}))
}