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",
  },
});

CodePudding user response：

There are a few issues with your code. I will list them as follows.

1. Inside Goalresults function change the bind on Pressable as follows: <Pressable onPress={props.onDeleteItem.bind(props, props.id)}>
2. Inside buttonPress function correct this line { text: comingdata, id: Math.random().toString() }, you missed '()' paranthesis on random
3. 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>
    );
}