Remove one item from flatlist - reactjs

Question

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;

Answer 1

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.