How do I rerender a FlatList after onPress action? - firebase

Question

I have a watchlist of bookings for movies and when I click on a button it deletes the booking from the Firestore database. This is the code I have:
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 = async(id) => {
try {
await deleteDoc(doc(db, 'booking', id));
}
catch(e) {
console.log(e)
}
console.log('deleted:' + id)
}
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.id)}}>
<Text>Delete</Text>
</TouchableOpacity>
</View>
</View>
)}
/>
</View>
)
}
export default WatchList`
How do I get the FlatList to rerender after I press the button? When I refresh the whole app I see that it changes, but I'd like to have it rerendered after the onPress action. Thank you!

Answer 1

As far as I see from your implementation as data for FlatList you use filteredBookings but you set in only once as an initial state for useState hook. You need to update your list of filteredBookings every time you get books from the API like this:
useEffect(() => {
// filter returns new array object
const resultOfFiltering = bookings.filter((booking) => place your condition here)
setFilteredBookings(resultOfFiltering)
}, [bookings])