title: React display not updating correctly
body: <p>I'm updating an object within react's state which I use to display a list. The state updates correctly, however the display breaks.</p>
  
  <p>This is the section of the code from inside my render function which produces the list.</p>
  
  <pre><code>this.state.shoppingItems ? this.state.shoppingItems.currentShoppingItems.map((item, index) =&gt; {
      console.log(item)
      return &lt;ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} /&gt;
  }) : undefined} 
  </code></pre>
  
  <p>Here is the code that produces the previous items list:</p>
  
  <pre><code>this.state.shoppingItems ? this.state.shoppingItems.previousShoppingItems.map((item, index) =&gt; {
      console.log(item)
      return &lt;ItemSummary key={index} onClickHandler={this.selectItem} updateShoppingItem={this.updateCurrentShoppingItem} shoppingItem={item} removeFromCurrentItems={this.removeFromCurrentItems} addToCurrentList={this.addToCurrentList} /&gt;
  }) : undefined} 
  </code></pre>
  
  <p>This is the method which removes the item from the current list and adds it to the previous list, where the issue occurs.</p>
  
  <pre><code>removeFromCurrentItems(shoppingItem) {
          const items = this.state.shoppingItems.currentShoppingItems.filter(item =&gt; item._id !== shoppingItem._id);
          let shoppingItems = this.state.shoppingItems;
          shoppingItems.currentShoppingItems = items;
          shoppingItem.number = 0;
          shoppingItem.completed = false;
          shoppingItems.previousShoppingItems.push(shoppingItem);
          this.setState({
              shoppingItems: shoppingItems
          });
          // call to API to update in database
      }
  </code></pre>
  
  <p>Here is the list before I remove the item.
  <a href="https://i.stack.imgur.com/MFYpr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MFYpr.png" alt="List of shopping Items"></a></p>
  
  <p>Here is the list after I remove the middle item:</p>
  
  <p><a href="https://i.stack.imgur.com/BtZwa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BtZwa.png" alt="List of shopping items with 1 removed"></a></p>
  
  <p>Finally here is the console.log output which shows that the items have updated properly but the display hasn't updated:</p>
  
  <p><a href="https://i.stack.imgur.com/bsi1N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bsi1N.png" alt="Console log output showing shopping items"></a></p>
  
  <p>I'm entirely new to react coming from angular so I have no idea if this is the correct way to do this or if there is a better way. But could somebody help me figure out why the display isn't updating? </p>