I get data from firebase firestore. It returns "filter is not function and error". I think it is problem because firstly runs LoadBooks function and after brings data from firestore. How can i fix it? Async? I can't write it rightly or i dont know, just can't do, need a help please.
*here isnt error if i fetch same data from JSON file.
**// Fetch Book to Home Page List**
const [list, setList] = useState();
useEffect(() => {
const data = onSnapshot(collection(db, "Books"), (snapshot) => {
setList(snapshot.docs.map((doc) => doc.data()));
});
return data;
}, []);
**//search**
const [search, setSearch] = useState("");
**//Category filter**
const [filter, setFilter] = useState("all");
function LoadBooks() {
// search
const book = list.filter((val) => {
if (search === "") {
return val;
} else if (val.title.toLowerCase().includes(search.toLowerCase())) {
return val;
}
})
// filter and map
.map((item) => {
if (item.category === filter) {
return (
<Book key={item.id} {...item} />
);
} else if (filter === "all") {
return (
<Book key={item.id} {...item} />
);
}
})
return book;
}
const book = LoadBooks();
Whether you like it or not, an operation where you fetch data from an external server or service will be asynchronous. What I suspect is happening here is that you are making your call to firebase, gets a promise from javascript which you aren't waiting for to resolve and then you perform a .map on an unresolved Promise.
I highly recommend you to look up async await and Promises :)
Your LoadBooks function depends on the list state, so needs to be executed in a useEffect handler and declare that dependency. Something like this:
useEffect(() => {
if (list != null) {
const book = LoadBooks();
}
}, [list]);