title: Removing items from a FlatList in React Native not rendering correctly
body: <p>Come across my first issue in React Native using a Flat List</p>
  
  <p>I have a flat list as follows:</p>
  
  <pre><code>render() {
      this.state.loadItems.forEach(function(item, index) {
        item.id = index;
      });
  
      return (       
        &lt;FlatList data={this.state.loadItems} extraData={this.state} renderItem={({item}) =&gt; this.renderLineItem(item)} keyExtractor={(item, index) =&gt; item.id}/&gt;      
      );       
  }
  
  renderLineItem(item) {
    return &lt;LoadListItem id={item.id} loadItem={item} configChanged={this.configHandler} itemRemoved={this.removeHandler}&gt;&lt;/LoadListItem&gt;
  }
  </code></pre>
  
  <p>In LoadListItem I have a callback which removes the item from the state list, as there is a popup to delete a LoadListItem, this is implemented as follows:</p>
  
  <pre><code>removeHandler(index) {    
      var newState = {};
      newState.loadItems = this.state.loadItems.slice(0);
      newState.loadItems.splice(index,1);
  
      this.setState(newState, this.updateParent);
    }
  </code></pre>
  
  <p>I am using ExtraData, cloning the array using slice etc but for the life of me the list does not render correctly. Using the debugger I can see that after set state gets called then render and renderLineItem get called with the new list...but the list visually has removed the wrong item. For instance if I have a list with A,B,C,D and I delete C I can see state update to A,B,D..which I can verify in the render methods using the debugger but the render visually shows A,B,C..so the delete has worked...but wrong item. If I click to a different tab (to remove the list from the view) and then back on again it fixes itself. So the state is being updated correctly...but the view removes the wrong item...Any Ideas??
  Cheers</p>