How to remove data from Flatlist using deleted icon in react native-CodePudding


function Three({ navigation, route }) {
     const Data = [
        {
            id: route.params.paramKey,
            name: route.params.paramKey1,
            note: route.params.paramKey2,
            desc: route.params.paramKey3,
        }
    ];

    const Delete=()=>{
        setInfo("")
    }

    const renderItem = ({ item }) => (

        <View style={{ backgroundColor: 'yellow', height: 160, width: 350, borderRadius: 15, paddingLeft: 10, marginTop: 30, marginLeft: 10 }}>
            <Text style={{ color: 'black', fontSize: 20 }}>selected Date:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey}</Text>
            </Text>

            <Text style={{ color: 'black', fontSize: 20 }}>
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey1}</Text>
            </Text>

            <Text style={{ color: 'black', fontSize: 20 }}>Note Title:
                <Text style={{ color: 'green', fontWeight: 'bold' }}> {route.params.paramKey2}</Text>
            </Text>
            <Text style={{ color: 'black', fontSize: 20 }}>Note Description:
                <Text style={{ color: 'green', fontWeight: 'bold' }}>{route.params.paramKey3}</Text>
            </Text>
            <TouchableOpacity
            onPress={()=>Delete()}
            style={{marginLeft:310,marginTop:15}}
            >
                <Icon name="trash" size={30} color="red"/>
            </TouchableOpacity>

        </View>

    );

    return (
        <SafeAreaView style={{ flex: 1 }}>

            <FlatList
                data={Data}
                renderItem={renderItem}
                keyExtractor={item => item.id}
            />

        </SafeAreaView >
    );

}


export default Home;

This is my output

I want like this

if I click the delete icon this Flat list data is removed from the screen
I'm Using route to pass value one page to other
I don't understand how I can remove item from this I can do but
It's not working
so how can I do

CodePudding user response：

There are a few things that you need to do.

The first one, use useState to handle the data. Change this:

     const Data = [
        {
            id: route.params.paramKey,
            name: route.params.paramKey1,
            note: route.params.paramKey2,
            desc: route.params.paramKey3,
        }
    ];

to this:

 const [data, setData] = useState([
    {
      id: route.params.paramKey,
      name: route.params.paramKey1,
      note: route.params.paramKey2,
      desc: route.params.paramKey3,
    },
  ]);

The second one is, to change the state when it is deleted.

const Delete = (index) => {
    setData((prev) => {
      prev.splice(index, 1);
      return [...prev];
    });
  };

Lastly, add index to the functions input and rename the Data to data in the FlatList.

Here is the full example:


function Three({ navigation, route }) {
  const [data, setData] = useState([
    {
      id: route.params.paramKey,
      name: route.params.paramKey1,
      note: route.params.paramKey2,
      desc: route.params.paramKey3,
    },
  ]);

  const Delete = (index) => {
    setData((prev) => {
      prev.splice(index, 1);
      return [...prev];
    });
  };

  const renderItem = ({ item, index }) => (
    <View
      style={{
        backgroundColor: 'yellow',
        height: 160,
        width: 350,
        borderRadius: 15,
        paddingLeft: 10,
        marginTop: 30,
        marginLeft: 10,
      }}
    >
      <Text style={{ color: 'black', fontSize: 20 }}>
        selected Date:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey}
        </Text>
      </Text>

      <Text style={{ color: 'black', fontSize: 20 }}>
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey1}
        </Text>
      </Text>

      <Text style={{ color: 'black', fontSize: 20 }}>
        Note Title:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {' '}
          {route.params.paramKey2}
        </Text>
      </Text>
      <Text style={{ color: 'black', fontSize: 20 }}>
        Note Description:
        <Text style={{ color: 'green', fontWeight: 'bold' }}>
          {route.params.paramKey3}
        </Text>
      </Text>
      <TouchableOpacity
        onPress={() => Delete(index)}
        style={{ marginLeft: 310, marginTop: 15 }}
      >
        <Icon name="trash" size={30} color="red" />
      </TouchableOpacity>
    </View>
  );

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
}

export default Home;