title: Why setState() isn't working in React in my case?
body: <p>I'm trying to implement a shopping cart by using contexts. The context works fine, but I need to create a method that removes one product each click. To do that I have to use <code>useState()</code> function. However, it doesn't even change the data in the state.</p>
  <p><strong>Here is my code for the function. Let me know if something isn't clear</strong></p>
  <p><strong>For more info. <code>productsToPurchase</code> is an array that have all the purchased products which looks like that:</strong></p>
  <p><code>[{itemId: &quot;ps-5&quot;, qty:2},{itemId: &quot;iphone-xr&quot;, qty:4},{itemId:&quot;ps-4&quot;, qty:7}]</code></p>
  <pre><code>export const CartContext = createContext()
  
  class CartContextProvider extends Component {
  
      state = {
          productsToPurchase: [],
          totalPrice:[]
      }
  
      addProduct = (itemId, prices) =&gt; {
          this.setState(oldState =&gt; {
              const objWithIdExist = oldState.productsToPurchase.find((o) =&gt; o.itemId === itemId);
              return {
                  productsToPurchase: !objWithIdExist
                      ? [...oldState.productsToPurchase, { itemId, qty: 1, price: prices }]
                      : oldState.productsToPurchase.map((o) =&gt;
                          o.itemId !== itemId ? o : { ...o, qty: o.qty + 1 }
                      )
              }
          })
  
          this.setState(oldState=&gt;{
              return{
                  totalPrice: getTotalAmount(oldState.productsToPurchase)
              }
          })
      }
  
      decreaseProduct = (itemId) =&gt;{
  
          this.setState(oldState=&gt;{
  
              // catch the item by mapping
              return oldState.productsToPurchase.map(product=&gt;{
                  if (product.itemId === itemId){
                      if (product.qty === 1){
                          //remove the product from the list
                          console.log(&quot;qty is 1!&quot;)
                      }
                      else {
                          console.log(&quot;Quantity is more than 1&quot;)
                          return  {...product, qty: product.qty - 1}
                      }
                  }
              })
  
          })
  
      }
  
      render() {
          return (
              &lt;CartContext.Provider value={{...this.state, addProduct: this.addProduct, decreaseProduct: this.decreaseProduct}}&gt;
                  {this.props.children}
              &lt;/CartContext.Provider&gt;
          )
      }
  }
  
  function getTotalAmount(productsToPurchase) {
  
      const totalPrice = []
  
      productsToPurchase.map((product, productIndex) =&gt;{
          product.price.map((price, priceIndex)=&gt;{
              if (productIndex === 0){
                  totalPrice.push({currency: price.currency, amount: price.amount * product.qty})
              }
              else {
                  totalPrice.map(total=&gt;{
                      if (total.currency === price.currency){
                          total.amount = total.amount + (price.amount * product.qty)
                      }
                  })
              }
          })
      })
  
      return totalPrice
  }
  
  export default CartContextProvider;
  </code></pre>