Removing items from a FlatList in React Native not rendering correctly

Question

Come across my first issue in React Native using a Flat List

I have a flat list as follows:

render() {
    this.state.loadItems.forEach(function(item, index) {
      item.id = index;
    });

    return (       
      <FlatList data={this.state.loadItems} extraData={this.state} renderItem={({item}) => this.renderLineItem(item)} keyExtractor={(item, index) => item.id}/>      
    );       
}

renderLineItem(item) {
  return <LoadListItem id={item.id} loadItem={item} configChanged={this.configHandler} itemRemoved={this.removeHandler}></LoadListItem>
}

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:

removeHandler(index) {    
    var newState = {};
    newState.loadItems = this.state.loadItems.slice(0);
    newState.loadItems.splice(index,1);

    this.setState(newState, this.updateParent);
  }

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 CI 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

Answer 1

This is likely a state immutability and/or index issue. As a general rule, always try to avoid mutating state directly (ie using this.state.loadItems.forEach() to set ids). Here's a helpful article on the subject: https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c

Ideally your data would have a unique id already when created, but when you have to add them yourself, do so when the data is initiated, either from an api or in componentDidMount(), not in render().

createIdsForData = () => {
  // returns a new array with ids from index
  let dataWithIds = this.state.loadItems.map((item, index) => {
    item.id = index;
  });

  this.setState({
    loadItems: dataWithIds;
  });
}

Since indexes can be somewhat fickle when it comes to deleting/adding components, I would also recommend passing the id of the LoadItem to your removeHandler instead of an index.

removeHandler = (id) => {
  // returns new array with item filtered out
  this.setState({
    loadItems: this.state.loadItems.filter(item => item.id === id);
  });
}

Hope this helps, cheers.