Reputation: 183
I have a data which is rendered as view and came across a issue on how to remove that particular index which is swiped
I have used FlatList as follows
render() {
this.leftOpenValue = Dimensions.get('window').width;
this.rightOpenValue = -Dimensions.get('window').width;
return (
<FlatList
data = {data}
keyExtractor = {data => data.id}
renderItem={ ({item}) => (
<View style={styles.container}>
<SwipeView
disableSwipeToRight = {false}
renderVisibleContent={() =>
<View>
<Text style={styles.text}> {item.title} </Text> // This repeats 9 times (9 Index)
</View>
}
renderRightView={() => (
<View style={{flex:1, justifyContent: 'flex-end', alignItems: 'center', backgroundColor: 'red'}}>
</View>
)}
leftOpenValue = {this.leftOpenValue}
rightOpenValue = {this.rightOpenValue}
onSwipedLeft={() => alert("deleted")}
swipeDuration = {300}
swipeToOpenPercent = {40}
disableSwipeToRight = {true}
/>
</View>
)}
/>
);
I have used Swipeview to swipe (react-native-swipeview) and delete the index in flatlist
I have an issue on how to remove an item from flatList
Upvotes: 15
Views: 38714
Reputation: 11
Do a normal object deletion then filter your state to clean it
let _rem = this.state.data;
delete _rem[index_no];
this.setState({data: this.state.data.filter(args=>args!==index_no)});
Upvotes: 0
Reputation: 203562
General pattern is to pass a uniquely identifiable id
(key, index, etc...) to your delete handler and filter your data on values that don't equal that key. This returns a new array without that entry to store in state.
deleteItemById = id => {
const filteredData = this.state.data.filter(item => item.id !== id);
this.setState({ data: filteredData });
}
render() {
...
return (
<FlatList
data={data} // Assuming this is `this.state.data`
keyExtractor={({item}) => item.id}
renderItem={({item}) => (
<View style={styles.container}>
<SwipeView
...
onSwipedLeft={() => this.deleteItemById(item.id)}
...
/>
</View>
)}
/>
);
}
Using a curried handler. This saves using an anonymous callback by setting the callback to be an event handler with the id
enclosed in the function scope.
deleteItemById = id => () => {
const filteredData = this.state.data.filter(item => item.id !== id);
this.setState({ data: filteredData });
}
render() {
...
return (
<FlatList
data={data} // Assuming this is `this.state.data`
keyExtractor={({item}) => item.id}
renderItem={({item}) => (
<View style={styles.container}>
<SwipeView
...
onSwipedLeft={this.deleteItemById(item.id)}
...
/>
</View>
)}
/>
);
}
Upvotes: 30
Reputation: 16152
Pass an Id of the item to onSwipeLeft={this.deleteItem(item.id)}
and update the data using setState.
state = {
data: [{
title: 'Hello world',
id: 'hello'
},{
title: 'World says hello',
id: 'say'
}]
}
deleteItem = (id) => {
this.setState({
data: this.state.data.filter(item => item.id !== id)
})
}
Upvotes: 3