updating state -> object -> array -> object (REACT)
Published: 2020-04-01 03:26:22

<h1>Lost in a deeply nested setState function</h1>

<p>What I am trying to do is to add an object to an array within an object within my components state. I have succeeded in doing so but I am trying to make it so if that object already exists, the function will update the quantity. I'm not sure what I'm doing wrong.</p>

----------state-----------
```
this.state = {
    products : [
        {
            productId: 1,
            productImage: 'tee1',
            productName: 'The Road Is Home Tee',
            productPrice: 25
        },
        {
            productId: 2,
            productImage: 'shorts1',
            productName: 'Striped Swim Shorts',
            productPrice: 50
        },
        {
            productId: 3,
            productImage: 'tee2',
            productName: 'Gray Long Sleeve',
            productPrice: 100
        },
        {
            productId: 4,
            productImage: 'hat1',
            productName: 'American Snapback',
            productPrice: 25
        },
        {
            productId: 5,
            productImage: 'shorts2',
            productName: 'American Shorts',
            productPrice: 50
        },
        {
            productId: 6,
            productImage: 'hat2',
            productName: 'Flex Fit Hat',
            productPrice: 100
        }
    ],
    cartData : {
        items: [],
        total: 0
    }
}
```
--- addToCart.js ---
```
addToCart = (productId, size, quantity) => {
        // IF CART IS EMPTY (CANT USE FOR LOOP)
        if ( this.state.cartData.items.length === 0 ) {
            this.setState(prevState => ({
                cartData: {
                    ...prevState.cartData,
                    items: [...prevState.cartData.items, { productData: this.state.products[productId - 1], productSize: size, productQuantity: quantity }]
                }
            }))
        }
        // IF CART IS NOT EMPTY
        else {
            // LOOP THROUGH EACH ITEM
            for( let i=0; i < this.state.cartData.items.length; i++ ) {
                // IF PRODUCT EXISTS
                if (productId === this.state.cartData.items[i].productData.productId) {
                    // SET STATE (RETURNS A FUNCTION)
                    this.setState(prevState => {
                        // MAP THROUGH EACH ITEM
                        const items = prevState.cartData.items.map(item => {
                            // IF THE PRODUCT IDS MATCH
                            if(i === (item.productData.productId -1)) {
                                // RETURN AN OBJECT WITH SAME ITEM PROPERTIES
                                // ADJUST QUANTITY
                                return {
                                    ...item,
                                    productQuantity: item.productQuantity + quantity,
                                }
                            }
                            // RETURN UNAFFECTED ITEMS AS WELL
                            else {
                                return item
                            }


                        })

                        // RETURN OUR ITEMS TO SET STATE
                        return {
                            items,
                        }
                    })
                }
                // IF PRODUCT DOES NOT EXIST
                else {
                    this.setState(prevState => ({
                        cartData: {
                            ...prevState.cartData,
                            items: [...prevState.cartData.items, { productData: this.state.products[productId - 1], productSize: size, productQuantity: quantity }]
                        }
                    }))
                }
            }
        }
    }
```
<p>As of now my application will add the first product correctly. Anything after that i start getting problems. When I try to add another product with the same ID it will not just increment the quantity like i would prefer it to, it creates a whole other object. Sooooo lost here please help!</p>