CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
J.range
J.range

Reputation: 459

Remove one item from flatlist

I'm using FlatList to show a list of data. I was trying dozens of example how to remove one row from data, but couldn't find the right solution.

Right now I'm removing all data from state, but I want to remove just one item.

Here is my HomeScreen which displays list of data:

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: data.products
    };
  }

  static navigationOptions = {
    title: "Products"
  };

  keyExtractor = (item, index) => item.id;

  openDetails = data => {
    this.props.navigation.navigate("Details", {
      data
    });
  };

  deleteItem = data => {
    this.setState({ data: ''})
  }

  renderProduct = ({ item, index }) => {
    return (
      <Item
        itemTitle={item.title}
        openDetails={() => this.openDetails(item)}
        itemUrl={item.imageUrl}
        data={this.state.data}
        deleteItem={() => this.deleteItem(item)}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.state.data}
        renderItem={this.renderProduct}
        keyExtractor={this.keyExtractor}
      />
    );
  }
}

export default HomeScreen;

Here is my Item component which is showing one item and receiving deleteRow function as prop:

const Item = props => {
  return (
    <View>
      <TouchableOpacity onPress={props.deleteItem}>
        <Image
          source={{ uri: props.itemUrl }}
          style={{ width: "100%", height: 220 }}
        />
        <Text style={styles.productTitle}>{props.itemTitle}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Item;

Upvotes: 1

Views: 5493

Answers (1)

Rishabh Bhatia
Rishabh Bhatia

Reputation: 1029

Use below deleteItem function.

deleteItem = data => {
  let allItems = [...this.state.data];
  let filteredItems = allItems.filter(item => item.id != data.id);
  this.setState({ data: filteredItems })
}

This should filter out the deleted item.

Upvotes: 6

Related Questions