Click here to Skip to main content
15,916,280 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
but the list is empty i tried to replace the flatlist with
<View>
       {books.map((bb) => {
         return (
           <View>
             <Text>name: {bb.ISBN}</Text>
           </View>
         );
       })}
     </View>

but i recived a notif that each child should have a key so how can i display all data

What I have tried:

<pre>
import { View, Text, StyleSheet, Button, FlatList } from "react-native";
import { useState, useEffect } from "react";
import {
  collection,
  query,
  orderBy,
  onSnapshot,
  setDoc,
  doc,
  getDoc,
  getDocs,
} from "firebase/firestore";
import { db } from "../../config/firebase";
//import { FlatList } from "react-native-gesture-handler";

export default function Discovry({ navigation }) {
  
  const [books, setBooks] = useState([]);
  const booksCol = collection(db, "Book");

  useEffect(() => {
    const q = query(booksCol); //which tabel
    onSnapshot(q, (querySnapshot) => {
      setBooks(
        querySnapshot.docs.map((doc) => ({
          id: doc.id,
          data: doc.data(),
        }))
      );
    });
  }, []);

  return (
    <View>
      <FlatList
        keyExtractor={(item) => item.id}
        data={books}
        renderItem={({ item }) => <Text>{item.ISBN}</Text>} //here i want my data
      />
     
    </View>
  );
}
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900