title: Setting state returns returns undefined, Cannot destructure property ‘title’ of ‘undefined’ as it is undefined
body: <p>I am trying to create an add to cart function that takes a product from a page and adds the properties to an array.
  My function looks like this</p>
  <pre><code>addToCart({ title, desc, price, image }) {
      // This is what is returning undefined 
      this.setState((state) =&gt; ({
        cart: [
          ...this.state.cart,
          
          {
            title,
            desc,
            price,
            image,
          },
          
        ],
        
      }));
    }
  </code></pre>
  <p>and my items look like:</p>
  <pre><code>&lt;Card key={title}  style={{ width: '18rem'}}&gt;
    &lt;Card.Img variant=&quot;top&quot; src={imageUrl}width='10rem' height='180rem' /&gt;
    &lt;Card.Body&gt;
      &lt;Card.Title&gt;{title}&lt;/Card.Title&gt;
      &lt;Card.Text&gt;
        {desc} &lt;br /&gt;
        {price}
      &lt;/Card.Text&gt;
      &lt;Button variant=&quot;primary&quot; onClick={e =&gt; this.handleAddToCart(e, this.state.items)} &gt;Add to cart&lt;/Button&gt;
    &lt;/Card.Body&gt;
  &lt;/Card&gt;
  </code></pre>
  <p>I am stumped as to why it is putting an array that looks like this</p>
  <pre><code>0:
  desc: undefined
  image: undefined
  price: undefined
  title: undefined
  </code></pre>
  <p>Here is my full code on codesandbox:
  <a href="https://codesandbox.io/s/unruffled-water-2rvjk?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/unruffled-water-2rvjk?file=/src/App.js</a></p>
  <p>I thank you in advance for taking the time to help me.</p>