title: ReactJS Wrong Component gets removed from DOM
body: <p>I have three files: <code>ShopsContainer.js</code> <code>ShopsComponent.js</code> and <code>ShopsItemComponent.js</code></p>
  
  <p><code>ShopsContainer</code> maintains an array of shop items in local state that gets passed down into <code>ShopsComponent</code> as props. <code>ShopsComponent</code> then maps through the items array that is being received as props and renders a <code>ShopsItemComponent</code> for each item in the array. </p>
  
  <p>Within my <code>ShopsContainer</code> file, I have a method that removes a shop item from state using the following code:</p>
  
  <pre><code>removeShop = (shopAccount) =&gt; {
    this.setState(prevState =&gt; ({
      items: prevState.items.filter(shop =&gt; {
         return shop.shopAccount !== shopAccount
       })
    }));
  }
  </code></pre>
  
  <p>When this happens, the correct item is removed from the items array in state, however, whatever the last <code>ShopItem</code> is that is in the DOM at the time of the <code>removeShop</code> call will get removed no matter if it is the correct item that should be removed or not. In other words, when <code>removeShop</code> gets called and the items array in state gets updated correctly, the wrong <code>ShopItemComponent</code> gets removed from the DOM. </p>
  
  <p>What I would like to happen (or what I think should happen) is when <code>removeShop</code> gets called, that shop gets removed from the items array in state and <code>ShopsContainer</code> re-renders causing <code>ShopsComponent</code> to re-render with the updated props being received. And lastly <code>ShopsComponent</code> would map through the newly updated items array in props displaying a `ShopItemComponent for the correct items. Perhaps the problem has to do with the props being updated? </p>
  
  <p>My code is as follows:</p>
  
  <p><strong>ShopsContainer.js</strong></p>
  
  <pre><code>class ShopsContainer extends Component {
    constructor() {
      this.state = {
        items: null
      } 
  
      this.getAll();
      this.removeShop = this.removeShop.bind(this);
    }
  
    getAll = () =&gt; {
      // API request that fetches items and updates state
    }
  
    removeShop = (shopAccount) =&gt; {
      this.setState(prevState =&gt; ({
        items: prevState.items.filter(shop =&gt; {
           return shop.shopAccount !== shopAccount
         })
      }));
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.state.items ? &lt;ShopComponent items={this.state.items} removeShop={this.removeShop} /&gt; : &lt;div&gt;&lt;h1&gt;Loading...&lt;/h1&gt;&lt;/div&gt;}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>ShopsComponent.js</strong></p>
  
  <pre><code>class ShopsComponent extends Component {
    constructor() {
      this.handleRemove = this.handleRemove.bind(this);
    }
  
    handleRemove = (shopAccount) =&gt; {
      this.props.removeShop(shopAccount);
    }
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Header /&gt;
          {this.props.items.map((shopItem, i) =&gt; {
            return (&lt;ShopItemComponent key={i} item={shopItem} removeShop={this.handleRemove} /&gt;);
          })}
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>