如何将特定的 object 从 FlatList 传递到 function，以便我可以将其从 Firestore 中删除？

Question

I have a watchlist of bookings for movies and when I click on a button for one of the FlatList rendered components I'd like to pass the object to the delete function and then to remove it from Firestore. I'm kind of stuck on how to do this. This is what I have so far:

const WatchList = () => {

  const uid = auth.currentUser.uid;
  const docRef = doc(db, 'users', uid);
  const [user, setUser] = useState({});
  const [watched, setWatched] = useState(true);
  const [text, setText] = useState('Watched movies');
  const [filteredBookings, setFilteredBookings] = useState(bookings);
  const bookingsRef = collection(db, "booking");

  const [bookings, setBookings] = useState({});
  useEffect(() => {
    getUser();
    getBookings();
  },[])

  const getUser = async () => {
    const snap = await getDoc(docRef)
    setUser({user, ...snap.data()})
  }

  const getBookings = async () => {
     const q = query(bookingsRef, where("users","array-contains",auth.currentUser.uid));
     const unsubscribe = onSnapshot(q, (querySnapshot) => {
     const a = [];
     querySnapshot.forEach((doc) => {            
     a.push(doc.data());
  });
     setBookings(querySnapshot.docs);
    });
  }

const deleteBooking = (item) => {
    console.log(item.data.().title)
}

  return (
<View>
  <View>
    <Text>{text}</Text>
  </View>
  
  <FlatList
    data = {filteredBookings}
    numColumns = {1}

    renderItem  = {({item}) => (
      <View>
      <View>
        <Text>{item.data().movie}</Text>
        <Text>{item.data().day} - {item.data().showtime}</Text>
      </View>

      <View>
        <TouchableOpacity onPress = {() => {deleteBooking(item)}}>
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
      </View>
    )}
  />
      </View>
  )
}

export default WatchList`

I've been trying to pass an item to display it in the console log to see if I got the right one first, but it's not working, so I'd really appreaciate some pointers. Thank you!

Answer 1

In your delete button's onPress method which you have defined as deleteBooking() you will get index also. you can rewrite as deleteBooking(item,index). and now in your definition use splice method of array. eg arrayName.splice(index,1) this will delete the record of given index. For your array it should be like bookings.splice(index,1) . Here 1 represents how many record you want to delete from given index.

Let me know doest it works for you or not.