I am unable to delete items in my React Native app - react-native

Question

I am unable to delete items.
This is App.js file main file:
import { useState } from "react";
import {
StyleSheet,
Text,
View,
Button,
TextInput,
FlatList,
} from "react-native";
import Goalresults from "./Componets/Goalresult";
export default function App() {
const [comingdata, SetData] = useState("");
const [listdata, setlistdata] = useState([]);
function fetchText(enteredText) {
SetData(enteredText);
}
function buttonPress() {
setlistdata((newdata) => [
...newdata,
{ text: comingdata, id: Math.random.toString() },
]);
}
I am passing id as parameter here and used filter method so that it filter all the id and delete id from the array list.
function deleteitem(id) {
setlistdata((newdata) => {
return newdata.filter((goal) => goal.id !== id);
});
}
return (
<View style={styles.container}>
<View>
<Text style={styles.goalsc}>Your Goals</Text>
</View>
<View style={styles.container1}>
<TextInput
style={styles.textInput}
placeholder="Add Your Goals here..."
onChangeText={fetchText}
/>
<Button title="Add Goal" onPress={buttonPress} />
</View>
<View style={styles.hello}>
<FlatList
data={listdata}
renderItem={(itemdata) => {
return (
<Goalresults
id={itemdata.item.id}
onDeleteItem={deleteitem}
text={itemdata.item.text}
/>
);
}}
keyExtractor={(item, index) => {
return item.id;
}}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 50,
paddingHorizontal: 16,
},
container1: {
flex: 1,
height: 120,
// paddingTop: 10,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 20,
borderBottomWidth: 1,
borderBottomColor: "#808080",
},
textInput: {
width: "70%",
borderWidth: 1,
borderRadius: 10,
marginRight: 10,
padding: 8,
},
hello: {
flex: 3,
},
goalsc: {
fontSize: 20,
fontWeight: "bold",
paddingLeft: 140,
},
});
Second separated file:
import { View, Text, StyleSheet,Pressable} from "react-native";
function Goalresults(props) {
I used bind there to bind id:
return (
<Pressable onPress={props.onDeleteItem.bind(this,props.id)}>
<View style={styles.goalInput}>
<Text style={styles.textcolor}>{props.text}</Text>
</View>
</Pressable>
);
}
export default Goalresults;
const styles = StyleSheet.create({
goalInput: {
flex: 5,
borderRadius: 5,
paddingTop: 10,
backgroundColor: "#A020F0",
padding: 10,
margin: 10,
},
textcolor: {
color: "white",
},
});

Answer 1

There are a few issues with your code. I will list them as follows.
Inside Goalresults function change the bind on Pressable as
follows: <Pressable onPress={props.onDeleteItem.bind(props, props.id)}>
Inside buttonPress function correct this line { text: comingdata, id: Math.random().toString() }, you missed '()' paranthesis on random
Also on Goalresults add a key={itemdata.item.id}. It will help resolve the warning "duplicate keys".
Following is the complete code
App.js
export default function App() {
const [comingdata, SetData] = useState("");
const [listdata, setlistdata] = useState([]);
function fetchText(enteredText) {
SetData(enteredText);
}
function buttonPress() {
setlistdata((newdata) => [
...newdata,
{ text: comingdata, id: Math.random().toString() },
]);
}
function deleteitem(id) {
console.log('id: ', id)
setlistdata((newdata) => {
return newdata.filter((goal) => goal.id !== id);
});
}
return (
<View style={styles.container}>
<View>
<Text style={styles.goalsc}>Your Goals</Text>
</View>
<View style={styles.container1}>
<TextInput
style={styles.textInput}
placeholder="Add Your Goals here..."
onChangeText={fetchText}
/>
<Button title="Add Goal" onPress={buttonPress} />
</View>
<View style={styles.hello}>
<FlatList
data={listdata}
renderItem={(itemdata) => {
return (
<Goalresults
key={itemdata.item.id}
id={itemdata.item.id}
onDeleteItem={deleteitem}
text={itemdata.item.text}
/>
);
}}
keyExtractor={(item, index) => {
return item.id;
}}
/>
</View>
</View>
);
}
GoalResults.js
function Goalresults(props) {
return (
<Pressable onPress={props.onDeleteItem.bind(props, props.id)}>
<View style={styles.goalInput}>
<Text style={styles.textcolor}>{props.text}</Text>
</View>
</Pressable>
);
}