Alert Delete: Unable to delete item from flat list

Question

I created a flatlist and a float icon to delete a item from flat list but before it's get delete user will get Alert and on press yes it will b deleted everything is working but after pressing yes item didn't deleted. How can i delete it? Here is my code

state = {
modal: false,
post: [
  {
    key: "1",
    title: "A Good Boi",
    des: "He's a good boi and every one know it.",
    image: require("../assets/dog.jpg"),
  },
  {
    key: "2",
    title: "John Cena",
    des: "As you can see, You can't see me!",
    image: require("../assets/cena.jpg"),
  },
],
image: null,
};

deleteItem = (key) => {
Alert.alert("Delete", "Are You Sure?", [
  {
    text: "Yes",
    onPress: this.setState({
      post: this.state.post.filter((item) => item.key !== key),
    }),
  },
  { text: "no" },
]);
 };
render(){return(
 <FlatList
      data={this.state.post}
      renderItem={({ item }) => (
        <>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={this.deleteItem}
            style={styles.Delete}
          >
            <MaterialCommunityIcons name="delete" color="red" size={30} />
          </TouchableOpacity>

Someone please help,.............................

Answer 1

You might need to pass the item or an index of the item to the function, but I'm not sure of the internals of the TouchableOpacity component. The following shows how to pass the item and its key to the deleteItem method:

deleteItem = (item) => {
  Alert.alert("Delete", "Are You Sure?", [
    {
      text: "Yes",
      onPress: () => this.setState({ // edited
        post: this.state.post.filter((p) => p.key !== item.key),
      }),
    },
    { text: "no" },
  ]);
};

render(){
  return(
    <FlatList
      data={this.state.post}
      renderItem={({ item }) => (
        <>
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => this.deleteItem(item)}
            style={styles.Delete}
          >
            <MaterialCommunityIcons name="delete" color="red" size={30} />
          </TouchableOpacity>
        </>
      )}
    />
  );
}; 

Answer 2

In the FlatList You have to use the prop keyExtractor inside the FlatList. (By doing this you assign a key to every object inside the array) You also have to pass in the key inside your “deleteItem()” function Like I have done in the below codes

 import React from 'react'
        import {View, Text,StyleSheet, FlatList,TouchableOpacity,Alert} from 'react-native'
        
        
        export default class App extends React.Component {
          constructor(props) {
            super(props);
        this.state = {
          modal: false,
          post: [
            {
              key: "1",
              title: "A Good Boi",
              des: "He's a good boi and every one know it.",
             
            },
            {
              key: "2",
              title: "John Cena",
              des: "As you can see, You can't see me!",
              
            },
          ],
          image: null,
          };
        }
          
          deleteItem = (key) => {
          Alert.alert("Delete", "Are You Sure?", [
            {
              text: "Yes",
              onPress:()=> this.setState({
                post: this.state.post.filter((item) => item.key !== key),
              }),
            },
            { text: "no",
          onPress:()=>null },
          ]);
           };
        
          render(){return(
         <View style={{flex:1}}>
           <FlatList
                data={this.state.post}
                keyExtractor={(item)=> item.key}
                renderItem={({ item }) => (
                  <TouchableOpacity
                  onPress={()=>{this.deleteItem(item.key)}}
                  >
                  <View>
                  <Text>`Click here to Delete this =${item.title}`</Text>
 <MaterialCommunityIcons name="delete" color="red" size={30} />
 </View>
                    </TouchableOpacity>
                  )}/>
                  </View>
          )}
                }