This is my app.js
the main body of my app. ... import React, { useState } from "react"; import { StyleSheet, Text, View, Button, TextInput, FlatList, } from "react-native"; import GoalItem from "./components/GoalItem"; import GoalInput from "./components/GoalInput";
export default function App() {
const [lifeGoals, setLifeGoals] = useState([]);
const addGoalHandler = (goalTitle) => {
setLifeGoals((currentGoals) => [
...currentGoals,
{ key: Math.random().toString(), value: goalTitle },
]);
};
const removeGoalHandler = (goalId) => {
setLifeGoals((currentGoals) => {
return currentGoals.filter((goal) => goal.id !== goalId);
});
};
return (
<View style={styles.Screen}>
<GoalInput onAddGoal={addGoalHandler} />
<FlatList
keyExtractor={(item, index) => item.id}
data={lifeGoals}
renderItem={(itemData) => (
<GoalItem
id={itemData.item.id}
onDelete={removeGoalHandler}
title={itemData.item.value}
/>
)}
/>
</View>
);
}
const styles = StyleSheet.create({
Screen: {
padding: 50,
},
});
...
This is my GoalItem which houses my list
...
import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-native";
const GoalItem = (props) => {
return (
<TouchableOpacity onPress={props.onDelete.bind(this, props.id)}>
<View style={styles.ListItem}>
<Text>{props.title}</Text>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
ListItem: {
padding: 10,
marginVertical: 10,
backgroundColor: "#CCFFFF",
borderRadius: 15,
},
});
export default GoalItem;
...
This is my GoalInput which handles the userinput and appending onto the list
...
import React, { useState } from "react";
import { View, TextInput, Button, Stylesheet, StyleSheet } from "react-native";
const GoalInput = (props) => {
const [enteredGoal, setEnteredGoal] = useState("");
const InputGoalHandler = (enteredText) => {
setEnteredGoal(enteredText);
};
return (
<View style={styles.inputContainer}>
<TextInput
placeholder="Enter Task Here"
style={styles.InputBox}
onChangeText={InputGoalHandler}
value={enteredGoal}
/>
<Button title="add" onPress={props.onAddGoal.bind(this, enteredGoal)} />
</View>
);
};
const styles = StyleSheet.create({
InputBox: {
borderColor: "black",
borderWidth: 0,
padding: 10,
width: "80%",
},
inputContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
},
});
export default GoalInput;
... I believe that the key might be the issue but i'm really not sure. What's supposed to happen is that when you click on an item in the list, it should be deleted, however it's deleting my whole list. How do i solve this?
const removeGoalHandler = (goalId) => {
setLifeGoals(lifeGoals.filter((m) => m.id !== goalId.id));
};
<FlatList
keyExtractor={(item) => item.id}
data={lifeGoals}
renderItem={(itemData) => (
<GoalItem
onDelete={removeGoalHandler}
title={itemData.item.value}
/>
)}
/>
const GoalItem = ({onDelete, title}) => {
return (
<TouchableOpacity onPress={onDelete}>
<View style={styles.ListItem}>
<Text>{title}</Text>
</View>
</TouchableOpacity>
);
};
try this
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.