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 birngs 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();