Q: ReactJS Wrong Component gets removed from DOM I have three files: ShopsContainer.js ShopsComponent.js and ShopsItemComponent.js
ShopsContainer maintains an array of shop items in local state that gets passed down into ShopsComponent as props. ShopsComponent then maps through the items array that is being received as props and renders a ShopsItemComponent for each item in the array. 
Within my ShopsContainer file, I have a method that removes a shop item from state using the following code:
removeShop = (shopAccount) => {
  this.setState(prevState => ({
    items: prevState.items.filter(shop => {
       return shop.shopAccount !== shopAccount
     })
  }));
}

When this happens, the correct item is removed from the items array in state, however, whatever the last ShopItem is that is in the DOM at the time of the removeShop call will get removed no matter if it is the correct item that should be removed or not. In other words, when removeShop gets called and the items array in state gets updated correctly, the wrong ShopItemComponent gets removed from the DOM. 
What I would like to happen (or what I think should happen) is when removeShop gets called, that shop gets removed from the items array in state and ShopsContainer re-renders causing ShopsComponent to re-render with the updated props being received. And lastly ShopsComponent 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? 
My code is as follows:
ShopsContainer.js
class ShopsContainer extends Component {
  constructor() {
    this.state = {
      items: null
    } 

    this.getAll();
    this.removeShop = this.removeShop.bind(this);
  }

  getAll = () => {
    // API request that fetches items and updates state
  }

  removeShop = (shopAccount) => {
    this.setState(prevState => ({
      items: prevState.items.filter(shop => {
         return shop.shopAccount !== shopAccount
       })
    }));
  }

  render() {
    return (
      <div>
        {this.state.items ? <ShopComponent items={this.state.items} removeShop={this.removeShop} /> : <div><h1>Loading...</h1></div>}
      </div>
    );
  }
}

ShopsComponent.js
class ShopsComponent extends Component {
  constructor() {
    this.handleRemove = this.handleRemove.bind(this);
  }

  handleRemove = (shopAccount) => {
    this.props.removeShop(shopAccount);
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.items.map((shopItem, i) => {
          return (<ShopItemComponent key={i} item={shopItem} removeShop={this.handleRemove} />);
        })}
      </React.Fragment>
    );
  }
}


A: Your code is working great, but you only has one mistake , your ShopComponent is assign index as a key for each ShopItemComponent and react is tracking those indexes to update the correct component, so you need to set key as a unique value between items, then I realize that shopAccount should be your id for each item.
The solution code is below.
class ShopsComponent extends Component {
  handleRemove = (shopAccount) => {
    this.props.removeShop(shopAccount);
  }

  render() {
    return (
      <React.Fragment>
        <Header />
        {this.props.items.map((shopItem) => <ShopItemComponent key={shopItem.shopAccount} item={shopItem} removeShop={this.handleRemove} />)}
      </React.Fragment>
    );
  }
}

I hope you can find useful.

Note, when you are using a arrow function into your class, don't bind that method into the constructor, so remove it, because 

handleRemove = (shopAccount) => {
  this.props.removeShop(shopAccount);
}

is already binded.
