Getting the key of FLatList keyExtractor to make network call react native

Question

I want to make network call to delete an item from an array. The end point is expecting me to pass the title as the ID of the item to be deleted in the array.

The array is of this form in the database:

payload: {
    title: string,
    description: string 
}

Here is my implementations so far.

import React from "react";
import {
  FlatList,
  View,
  Text,
  StyleSheet,
  ActivityIndicator,
} from "react-native";
import { Feather } from "@expo/vector-icons";
import { MaterialIcons } from "@expo/vector-icons";
import {
  widthPercentageToDP as WP,
  heightPercentageToDP as HP,
} from "react-native-responsive-screen";
import dimensions from "../../constants/dimensions";
import { fetchTodo, useDeleteTodo } from "../../server";
import showToast from "../../components/toast";

export default function TodoList({navigation}) {
  const {data, isLoading } = fetchTodo()
  console.log(data?.data)
  const {mutateAsync} = useDeleteTodo()

  const handleDelete = async (title:string) => {
    try {
      const response = await mutateAsync(title)
      showToast(response.data.message);
      // setClearTextInput("");
    } catch (error) {
      showToast(error);
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
        contentContainerStyle={styles.contentContainer}
        data={data?.data.payload}
        keyExtractor={(ITodo) => ITodo.title}
        renderItem={(renderTodo) => {
          return (
            <View style={styles.itemContainer}>
              <Text style={styles.item}>{renderTodo.item.title}</Text>
              <View style={styles.actionStyle}>
                <Feather name="edit" size={WP(6)} color="blue"
                onPress={()=>
                    navigation.navigate('EditTodoScreen')
                }
                />
                <MaterialIcons
                  name="delete"
                  size={WP(6)}
                  color="red"
                  onPress={() => {
                    handleDelete()
                  }}
                />
              </View>
            </View>
          );
        }}
        ListEmptyComponent={() =>
          isLoading ? (
            <ActivityIndicator color="red" />
          ) : (
            <Text style={{ marginTop: HP(8), fontSize: WP(7) }}>
              List is empty
            </Text>
          )
        }
      />
    </View>
  );
}

I have already made the title to be the key in the FlatList keyExtractor and I want to pass the title of the item clicked to the handleDelete(). It tried to pass "renderTodo" to it but i could not get the title from it. I am still new to react-native. Please how can i achieve this?

Answer 1

I would suggest you to do like this (This looks more clean and easy to understand.

keyExtractor={({ title }) => title}
   renderItem={({ item }) => {
     return (
        <View style={styles.itemContainer}>
          <Text style={styles.item}>{item.title}</Text>
          <View style={styles.actionStyle}>
            <Feather name="edit" size={WP(6)} color="blue"
            onPress={()=>
                navigation.navigate('EditTodoScreen')
            }
            />
            <MaterialIcons
              name="delete"
              size={WP(6)}
              color="red"
              onPress={() => {
                handleDelete(item.title)
              }}
            />
          </View>
    </View>
    );
 }}