title: React: state not updating on first click
body: <p>I am working on a shopping cart sample.</p>
  
  <p>On each click, I am adding an object of the project to the Cart array.
  When I click the add cart button the first time, it doesn't update the Cart, but it updates on the second time. </p>
  
  <p>Although, when I click the viewCart button in the render's return statement, it shows the accurate number of items in the cart.
  See my code below:</p>
  
  <p>I need to be able to see the accurate number of items in the cart without clicking the viewCart button. The products come from a local JSON file, so I don't think there is any problem with the loading of the JSON file.</p>
  
  <pre><code>constructor (props) {
      super(props);
      this.state = {
          Cart: []
      };
      this.addItem = this.addItem.bind(this);
  }
  
  addItem(productKey) {
      this.setState({ Cart: [...this.state.Cart, ProductsJSON[productKey]]})
      console.log(this.state.Cart);
  }
  
  viewCart() {
      console.log(this.state.Cart);
  }
  
  render() {
    const AllProducts = ProductsJSON;
  
    var Products = AllProducts.map((item) =&gt; {
      return (
              &lt;div className="col-4" key={item.key} &gt;
                  &lt;a onClick={() =&gt; this.addItem(item.key)} className="btn btn-primary btn-sm"&gt;Add to Cart&lt;/a&gt;
              &lt;/div&gt; 
          )
  })
  
  return (
          &lt;div className="container"&gt;
              &lt;div className="row"&gt;
                  {Products}
                  &lt;a onClick={() =&gt; this.viewCart()} className="btn btn-primary btn-sm"&gt;viewCart&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>