We Keep Coding

Firebase doc field shows an empty array after using useState() [duplicate]

This question already has answers here:
The useState set method is not reflecting a change immediately
(15 answers)
Closed last month.
I'm new to react and I'm trying to make an app, where user can upload multiple images at once, and those images get sent to the firebase storage, and urls of those images get stored in an array inside a doc, so that later on they can be accessed in a different page.
Here is a snippet of my code:
function CreateCarParts({isAuth}) {
const [images, setImages] = useState(null);
const [imageUrls, setImageUrls] = useState([]);
let navigate = useNavigate();
const postsCollectionRef = collection(db, "CarParts")
useEffect(() => {
if (!localStorage.getItem('isAuth')){
navigate("/login");
};
}, []);
const uploadImages = async () => {
if(images === null) return;
let uniqueFolderName = new Date().getTime().toString();
const imageList = Array.from(images);
for(let i = 0; i < imageList.length; i++) {
const image = imageList[i];
const imageLinkName = `carParts/${uniqueFolderName}/${image.name}`;
const imageRef = ref(storage, imageLinkName);
const snapshot = await uploadBytes(imageRef, image);
const url = await getDownloadURL(snapshot.ref);
setImageUrls((prev) => [...prev, url]);
}
alert("Images Uploaded");
};
const createPost = async () => {
await uploadImages();
await addDoc(postsCollectionRef, {imageUrls});
navigate('/carparts');
};
return (
<>
<Form.Control onChange={(event) => {setImages(event.target.files);uploadImages();}} type="file" multiple />
<Button onClick={createPost}> Submit </Button>
</>
)
}
export default CreateCarParts;
The images get sent to the storage, and the doc is created successfully, however the imageUrls array is empty. I can't figure out why it's not working, I assume I'm using the useState() incorrectly.

imageUrls won't be updated in the same render cycle, so calling await addDoc(postsCollectionRef, {imageUrls}); right after await uploadImages(); won't work
I would store urls in a local array instead
function CreateCarParts({isAuth}) {
const [images, setImages] = useState(null);
let navigate = useNavigate();
const postsCollectionRef = collection(db, "CarParts")
useEffect(() => {
if (!localStorage.getItem('isAuth')){
navigate("/login");
};
}, []);
const uploadImages = async () => {
if(images === null) return;
let uniqueFolderName = new Date().getTime().toString();
const imageList = Array.from(images);
const urls = [];
for(let i = 0; i < imageList.length; i++) {
const image = imageList[i];
const imageLinkName = `carParts/${uniqueFolderName}/${image.name}`;
const imageRef = ref(storage, imageLinkName);
const snapshot = await uploadBytes(imageRef, image);
const url = await getDownloadURL(snapshot.ref);
urls.push(url);
}
alert("Images Uploaded");
return urls;
};
const createPost = async () => {
const imageUrls = await uploadImages();
await addDoc(postsCollectionRef, {imageUrls});
navigate('/carparts');
};
return (
<>
<Form.Control onChange={(event) => {setImages(event.target.files);uploadImages();}} type="file" multiple />
<Button onClick={createPost}> Submit </Button>
</>
)
}
export default CreateCarParts;

How to sort nested object in an array?

I am stuck on this for some reason. I know how to use .sort when there is a simple array. I am not quite sure how to sort a nested object in an array using a variable in that object. I can sort it, but I am not sure how to display it.
Here is what I am working with. I get data from a database and map over that data to display it. Everything works as expected. Now I want to take that data and sort it by artist.
Here is the code I am working with.
export default function ShowRecords() {
const classes = recordFormStyles();
const url = " http://localhost:5000";
//get userData state to use in useEffect
//set state for showing records in database and opening/closing modals
const [newRecords, newRecordData] = React.useState([]);
const [editOpen, handleEditModal] = React.useState(false);
const [addModalOpen, handleAddModal] = React.useState(false);
//set state for edit records
const [title, setTitle] = React.useState("");
const [artist, setArtist] = React.useState("");
const [rating, setRating] = React.useState("");
const [genre, setGenre] = React.useState("");
const [description, setDescription] = React.useState("");
const [userId, setUserId] = React.useState("");
//set state for favorite icon
const [favorite, setFavorite] = React.useState([]);
const fetchFavoriteData = async () => {
const result = await axios.get(url + "/favorite/get", authToken);
setFavorite(result.data);
};
const addFavorites = async (_id, title, artist, rating, genre, description, isFavorite) => {
const favorites = {
userId: _id,
title,
artist,
rating,
genre,
description,
isFavorite
};
const result = await axios.post(
url + "/favorite/add",
favorites,
authToken
);
setFavorite(result.data);
};
const deleteFavorite = async (title) => {
await axios.delete("http://localhost:5000/favorite/delete", {
data: { title: title },
authToken,
});
};
//functions to control state
const handleAddModalOpen = () => {
handleAddModal(true);
};
const handleCloseAddModal = () => {
handleAddModal(false);
};
const handleIsEditModalClose = () => {
handleEditModal();
};
//fetch record data
const fetchData = async () => {
const result = await axios.get(url + "/record/get", authToken);
newRecordData(result.data);
};
React.useEffect(() => {
fetchData();
fetchFavoriteData();
}, []);
// delete records
const deleteRecord = async (_id) => {
const deleteRecords = {
_id: _id,
};
await axios.delete(url + "/record/" + _id, deleteRecords).then((result) => {
const refresh = newRecords.filter((result) => result._id !== _id);
newRecordData(refresh);
});
};
//functions for controlling edit record state
const editRecord = (_id, title, artist, rating, genre, description) => {
setUserId(_id);
setTitle(title);
setArtist(artist);
setRating(rating);
setGenre(genre);
setDescription(description);
handleEditModal(true);
console.log(title);
};
//functions for setting favorite state and color and post request to add favorite
return (
<div>
{/* set props */}
<Favorites />
<AddRecord
isAddModalOpen={addModalOpen}
handleIsAddModalClose={handleCloseAddModal}
addNewRecords={newRecords}
handleIsAddModalOpen={handleAddModal}
refreshRecordData={newRecordData}
/>
<EditRecords
editModalOpen={editOpen}
handleCloseEditModal={handleIsEditModalClose}
editUserId={userId}
editTitle={title}
editArtist={artist}
editRating={rating}
editGenre={genre}
editDescription={description}
editTitleState={setTitle}
editArtistState={setArtist}
editRatingState={setRating}
editGenreState={setGenre}
editDescriptionState={setDescription}
editUrl={url}
editFetchData={fetchData}
editNewRecordData={newRecordData}
/>
<Button
className={classes.addButton}
onClick={() => handleAddModalOpen(true)}
>
Add Record
</Button>
<div className={classes.cardsContainer}>
<Grid container spacing={8} style={{ padding: 80 }} justify = "center">
{newRecords.length > 0 &&
newRecords.map((element) => (
<RecordCard
key = {element._id}
element={element}
editRecord={editRecord}
deleteRecord={deleteRecord}
addFavorites = {addFavorites}
deleteFavorite = {deleteFavorite}
favorite = {favorite}
/>
))}
</Grid>
</div>
</div>
);
}
I get the data in my uesEffect and I want to sort it using the Arist name. I am just unsure on how to do that. I couldn't find much googling.

Sort the data before you save it into state. The sort function can take in a function that returns -1, 0, 1 to determine how things should be ordered. The below example uses the localeCompare function to sort by the artist.
let data = [
{ artist: 'john', record: '1' },
{ artist: 'mary', record: '2' },
{ artist: 'bob', record: '3' }
];
let sorted = data.sort((a,b) => (a.artist.localeCompare(b.artist)));
console.log(sorted);

Losing in_cart state only on certain page refresh

So i am currently using states to determine if a user has added an item to their cart or not. It is working almost flawlessly other than when they are on the "Product Page"(The page where they add to cart), and they refresh it empties out the in_cart array, but if im on the home page after adding them i can refresh all i want, this means it has to be something in the product page code but cant figure it out, here is the product page code:
const ProductPageBody = ({ products, in_cart, set_in_cart }) => {
//Keeps track of color user selects
const [color, setColor] = useState("");
//Keeps track of size user selects
const [size, setSize] = useState("Small");
//Filters out the product that the user selected
const { shirtName } = useParams();
const shirt = products.filter((product) => product.name === shirtName);
//Updates state size of shirt being selected
const updateSize = () => {
let select = document.getElementById("sizeSelect");
let text = select.options[select.selectedIndex].text;
setSize(text);
};
//Updates state color of shirt being selected
const updateColor = useCallback(async (userColor, shirt) => {
const shirtColorSource = await fetch(
`http://localhost:5000/products/${shirt.product_id}/${userColor}`
);
const shirtColor = await shirtColorSource.json();
console.log(shirtColor);
shirt.image = shirtColor[0].image;
setColor(userColor);
}, []);
//Occurs when ADD TO CART is clicked
const updateInCart = async (e) => {
e.preventDefault();
const newShirt = { ...shirt[0] };
newShirt["color"] = color;
newShirt["size"] = size;
const newList = in_cart.list.concat(newShirt);
const cost = newList.reduce((sum, shirt) => sum + shirt.price, 0);
set_in_cart({
list: newList,
totalcost: cost,
});
};
//Stores in cart items
useEffect(() => {
localStorage.setItem("inCartItems", JSON.stringify(in_cart));
}, [in_cart]);
and its parent where the state is located:
const Routes = () => {
const [products, setProducts] = useState([]);
const [in_cart, set_in_cart] = useState({
list: [],
totalCost: 0,
});
const getProducts = async () => {
try {
const response = await fetch("http://localhost:5000/products/");
const jsonData = await response.json();
setProducts(jsonData);
} catch (err) {
console.error(err.message);
}
if (localStorage.getItem("inCartItems")) {
set_in_cart(JSON.parse(localStorage.getItem("inCartItems")));
}
};
useEffect(() => {
getProducts();
}, []);
any help would be appreciated, thank you!

In Routes, add an effect to persist the cart data (in_cart) to localStorage when it updates.
useEffect(() => {
try {
localStorage.setItem("inCartItems", JSON.stringify(in_cart));
} catch(err) {
// do something if cart persistence fails
}
}, [in_cart]);

Fetching and displaying images from firebase on React.js app

so I am trying to fetch images from Firebase storage and then display them in a React component. Frankly, I'm new to React/Javascript and I'm having a hard time understanding the asynchronous nature of React/JS and I'm running into the problem where my images are fetched but the component is not re-rendered upon completion of the fetch...
This is the code on my main page, in the useEffect function, I am trying to fetch the images and then store their download urls in an array and then set that array in state (upon page load i.e. only once). Since these are promises, its not happening synchronously and when I first load the page it displays no images. If I, however, click on a different component on the page, it re-renders my Pictures component and the images show up(??), so I know the fetch has worked.
let storageRef = firebase.storage().ref()
let calendarRef = React.createRef()
const position = props.location.state.name.indexOf("#")
const username = props.location.state.name.substring(0, position);
const [simpleDate, setSimpleDate] = useState(null)
const [selectedDate, setSelectedDate] = useState('')
const [showModal, setShowModal] = useState(false)
const [showCancelModal, setShowCancelModal] = useState(false)
const [expectedPeople, setExpectedPeople] = useState(null)
const [events, setEvents] = useState([])
const [helpModal, showHelpModal] = useState(false)
const [pictureURLs, setPictureURLs] = useState([])
useEffect(() => {
//load pictures
const fetchImages = async () => {
let urls = []
storageRef.child('cabinPictures').listAll().then((result) => {
result.items.forEach((imageRef) => {
imageRef.getDownloadURL().then(url => {
urls.push(url)
})
})
})
return urls;
}
fetchImages().then(urls => {
setPictureURLs(urls);
console.log("inside .then() " + pictureURLs)
})
//fetch reservations
firebase
.firestore()
.collection('reservations')
.onSnapshot(serverUpdate => {
const reservations = serverUpdate.docs.map(_doc => {
const data = _doc.data();
data['id'] = _doc.id;
return data;
});
let fetchedEvents = reservations.map(reservation => {
let date = reservation.reservationDate.toDate()
const month = ("0" + (date.getUTCMonth() + 1))
let dateString = date.getUTCFullYear() + "-" + ("0" + (date.getUTCMonth()+1)).slice(-2) + "-" + ("0" + date.getUTCDate()).slice(-2)
return {title: reservation.username + " - " + reservation.numPeople + " total", date: dateString, id: reservation.id, totalPeople: reservation.numPeople, month: month}
})
console.log(fetchedEvents)
setEvents(fetchedEvents)
});
}, [])
My Pictures component in the main page where the useEffect (above) is run. I pass the urls from state as a prop:
<div className="pictures-div-container">
<Pictures pictureURLs={pictureURLs}>
</Pictures>
</div>
The code for my Picture component:
import React, { useState, useEffect } from 'react'
import styles from "./styles.css"
const firebase = require('firebase');
const Pictures = (props) => {
const [uploadImage, setUploadImage] = useState(null)
const [progressValue, setProgressValue] = useState(0)
let storageRef = firebase.storage().ref()
let { pictureURLs } = props
const handleUpload = () => {
setProgressValue(0)
const uploadTask = storageRef.child(`cabinPictures/${uploadImage.name}`).put(uploadImage)
uploadTask.on('state_changed',
(snapshot) => {
//progress function
const progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes ) * 100)
setProgressValue(progress)
},
(error) => {
//error function
console.log(error)
},
() => {
//complete function
storageRef.child('cabinPictures').child(uploadImage.name).getDownloadURL().then(url => {
console.log(url)
} )
});
}
const handleFileSelect = (e) => {
if (e.target.files[0]) {
setUploadImage(e.target.files[0])
}
}
return (
<div className="pictures-container">
<h2>Upload a Picture!</h2>
<button className="upload-button" onClick={() => handleUpload()}>Upload</button>
<input type="file" onChange={(e) => handleFileSelect(e)}></input>
<progress value={progressValue} max="100"></progress>
<div className="pictures">
{
pictureURLs.map((url, index) => {
return <img className="picture" key={index} src={url}></img>
})
}
</div>
</div>
)
}
export default Pictures
So, can anyone help me understand why the Pictures component is not re-rendering automatically when the state is set after fetching the picture urls from firebase? I thought that when a prop changes in a component, the whole component is re-rendered?
EDIT:
So this is what I changed in my main page's useEffect function as per the answer's suggestions, and it works!
//fetch and load pictures
const fetchImages = async () => {
let result = await storageRef.child('cabinPictures').listAll();
let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL())
return Promise.all(urlPromises)
}
const loadImages = async () => {
const urls = await fetchImages()
setPictureURLs(urls)
}
loadImages()

You have to let all the nested promises resolve before you return urls
I am not very current on firebase API so am not sure if result.items is an actual array or an object that has a foreach method. Following should work if it is a js array
Try something like:
//load pictures
const fetchImages = async() => {
let result = await storageRef.child('cabinPictures').listAll();
/// map() array of the imageRef.getDownloadURL() promises
let urlPromises = result.items.map(imageRef => imageRef.getDownloadURL());
// return all resolved promises
return Promise.all(urlPromises);
}
const urls = await fetchImages()
setPictureURLs(urls);
console.log("inside .then() ", urls)

How to paginate Cloud Firestore data with ReactJs

I'm working with Firebase - Cloud Firestore and at the moment I would like to paginate all the records available. I already have a list of records and what is left is some pagination for this. I'm new with Cloud Firestore, so any clarity is appreciated.
I checked the Firestore documentation (https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query) and examples with ReactJS, but there is not much available.
I understand that eg:.startAt(0), .limit(10), but the question is how to paginate properly with this component called at the render method.
import React, { Component } from 'react';
import Pagination from "react-js-pagination";
import firestore from "./Firebase";
export default class DataList extends Component {
constructor(props) {
super(props);
this.state = {
dbItems: [],
currentPage: 1,
itemsPerPage: 3,
totalItemCount: 1,
activePage: 15
}
this.handlePageChange = this.handlePageChange.bind(this);
}
handlePageChange(pageNumber) {
console.log(`active page is ${pageNumber}`);
this.setState({ activePage: pageNumber });
}
async getItems() {
const { currentPage, itemsPerPage } = this.state;
const startAt = currentPage * itemsPerPage - itemsPerPage;
const usersQuery = firestore.collection('Users').orderBy("email").startAt(startAt).limit(itemsPerPage)
const snapshot = await usersQuery.get()
const items = snapshot.docs.map(doc => doc.data())
return this.setState({
dbItems: items,
totalItemCount: firestore.collection('Users').get().then(res => console.log(res.size))
})
}
componentDidMount() {
this.getItems()
}
componentDidUpdate(prevProps, prevState) {
const isDifferentPage = this.state.currentPage !== prevState.currentPage
if (isDifferentPage) this.getItems()
}
render() {
return (
<div>
{this.state.dbItems.map((users, index) => {
return (
<p key={index}>
<b>First Name:</b> {users.firstname} <br />
<b>Email:</b> {users.email}
</p>
)
})
}
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.itemsPerPage}
totalItemsCount={this.state.totalItemCount}
pageRangeDisplayed={this.state.itemsPerPage}
onChange={this.handlePageChange}
/>
</div>
)
}
}
Thank you for the help!

Pagination can be achieved using startAt()
// Get Items.
async fetchUsers = () => {
// State.
const {users, usersPerPage} = this.state
// Last Visible.
const lastVisible = users && users.docs[users.docs.length - 1]
// Query.
const query = firestore.collection('Users')
.orderBy('email')
.startAfter(lastVisible)
.limit(usersPerPage)
// Users.
const users = await query.get()
// ..
return this.setState({users})
}
// Did Mount.
componentDidMount() {
this.fetchUsers()
}
// Did Update.
componentDidUpdate(prevProps, prevState) {
const isDifferentPage = this.state.currentPage !== prevState.currentPage
if (isDifferentPage) this.fetchUsers()
}

Anyone new to Firestore and Firestore Pagination with ReactJS that would be kinda confusing to understand how Pagination will work or when to trigger call to next set of documents in firestore. anyone struggle like this try my example to make some ideas and process ahead.(Im using React-Bootstrap to render UI Elements)
01 - Install Package react-infinite-scroll-component
First Install this package yarn add react-infinite-scroll-component
02 - Include Package
Include it to your file by 'import InfiniteScroll from 'react-infinite-scroll-component';' importing it
03 - Init State
initiate state with empty list array
this.state = {
list: [],
};
04 - Create Function to get first set of data and initiate it with component did mount
//component did mount will fetch first data from firestore
componentDidMount(){
this.getUsers()
}
getUsers(){
let set = this
//initiate first set
var first = set.ref.collection("users").limit(12);
first.get().then(function (documentSnapshots) {
// Get the last visible document
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
//initiate local list
const list = [];
documentSnapshots.forEach(function(doc) {
//im fetching only name and avatar url you can get any data
//from your firestore as you like
const { name, avatar_full_url } = doc.data();
//pushing it to local array
list.push({ key: doc.id, name, avatar_full_url });
});
//set state with updated array of data
//also save last fetched data in state
set.setState({ list, last: lastVisible });
});
}
05 - Create function to get balance data set
fetchMoreData = () => {
let set = this
//get last state we added from getUsers()
let last = this.state.last
var next = set.ref.collection("users").startAfter(last).limit(12);
next.get().then(function (documentSnapshots) {
// Get the last visible document
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
const list = [];
documentSnapshots.forEach(function(doc) {
//im fetching only name and avatar url you can get any data
//from your firestore as you like
const { name, avatar_full_url } = doc.data();
list.push({ key: doc.id, name, avatar_full_url });
});
//set state with updated array of data
//also save last fetched data in state
let updated_list = set.state.list.concat(list);
set.setState({ list: updated_list, last: lastVisible });
});
};
06 - Render UI
<InfiniteScroll
dataLength={this.state.list.length}
next={this.fetchMoreData}
hasMore={true}
loader={<span className="text-secondary">loading</span>}>
<Row className="mt-3">
{ this.state.list.map((single, index) => (
<Col lg={4} key={ index }>
<div>
<Image src={ single.avatar_full_url }roundedCircle width="100" />
<h2>{ single.name }</h2>
</div>
</Col>
))}
</Row>
</InfiniteScroll>

Check this example this could help anyone who trying previous / next pagination
//initial state
const [list, setList] = useState([]);
const [page, setPage] = useState(1);
//loading initial data
useEffect(() => {
const fetchData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc') //order using firestore timestamp
.limit(5) //change limit value as your need
.onSnapshot(function(querySnapshot) {
var items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
})
};
fetchData();
}, []);
After loading initial data use following function for next button trigger
//next button function
const showNext = ({ item }) => {
if(list.length === 0) {
//use this to show hide buttons if there is no records
} else {
const fetchNextData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc') //order using firestore timestamp
.limit(5) //change limit value as your need
.startAfter(item.created) //we pass props item's first created timestamp to do start after you can change as per your wish
.onSnapshot(function(querySnapshot) {
const items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
setPage(page + 1) //in case you like to show current page number you can use this
})
};
fetchNextData();
}
};
Then Previous button function
//previous button function
const showPrevious = ({item}) => {
const fetchPreviousData = async () => {
await firebase.firestore().collection('users')
.orderBy('created', 'desc')
.endBefore(item.created) //this is important when we go back
.limitToLast(5) //this is important when we go back
.onSnapshot(function(querySnapshot) {
const items = [];
querySnapshot.forEach(function(doc) {
items.push({ key: doc.id, ...doc.data() });
});
setList(items);
setPage(page - 1)
})
};
fetchPreviousData();
};
at the end create list view & two buttons like this
{
//list doc's here this will come inside return (place this code inside table)
list.map((doc) => (
<tr key={doc.key}>
<td>{ doc.name }</td>
<td>{ doc.age }</td>
<td>{ doc.note }</td>
</tr>
))
}
{
//show previous button only when we have items
//pass first item to showPrevious function
page === 1 ? '' :
<Button onClick={() => showPrevious({ item: list[0] }) }>Previous</Button>
}
{
//show next button only when we have items
//pass last item to showNext function
list.length < 5 ? '' :
<Button onClick={() => showNext({ item: list[list.length - 1] })}>Next</Button>
}
That's it check my code comments where you can change as per your need. this is what happens when you paginate using Firebase FireStore. you can use create custom hook to reuse these component as per your need.
Hope this could help someone so i made a gist check it here

here AddTable and AddForm is adding table and add form to fill data in table...
import React, { useEffect, useState } from "react";
import Button from "react-bootstrap/Button";
import Pagination from "react-bootstrap/Pagination";
import AddTable from "../management/AddTable";
import AddForm from "../management/AddSuperAdminForm";
import {
where,
getDocs,
collection,
query,
orderBy,
startAfter,
limit,
endBefore,
limitToLast,
} from "firebase/firestore";
import { db_firestore } from "../../../firebase.config";
const SuperAdmin = () => {
const [tableDataArray, setTableDataArray] = useState();
const [show, setShow] = useState(false);
const [editId, setEditId] = useState("");
const [oldUid, setOldUid] = useState("");
const [lastVisible, setLastVisible] = useState();
const [prevVisible, setPrevVisible] = useState();
const handleClose = () => {
setShow(false);
setEditId("");
};
const handleShow = () => {
setShow(true);
setEditId("");
};
let tempdata;
let pageSize = 3;
let q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
limit(pageSize)
);
function nextPage(lastVisible) {
q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
startAfter(lastVisible),
limit(pageSize)
);
}
function prevPage(firstVisible) {
q = query(
collection(db_firestore, "users"),
where("role", "==", "superadmin"),
orderBy("timestamps", "desc"),
endBefore(firstVisible),
limitToLast(pageSize + 1)
);
}
const newfun = async () => {
const querySnapshot = await getDocs(q);
tempdata = [];
// Get the last visible document
setLastVisible(querySnapshot.docs[querySnapshot.docs.length - 1]);
// Get the prev visible document
setPrevVisible(querySnapshot.docs[0]);
querySnapshot.forEach((doc) => {
const { name, email, uid } = doc.data();
tempdata.push([name, email, uid, doc.id]);
});
console.log("SuperAdmin...");
setTableDataArray(tempdata);
};
useEffect(() => {
newfun();
// setInterval(() => { // if you want to get new update after some secound
// newfun();
// }, 10000);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return (
<div>
<Button
className="d-block mx-auto my-2"
variant="primary"
onClick={handleShow}
>
Add SuperAdmin
</Button>
{/* -----> AddTable <------
Index will generate Automatic In Table.
Always keep action end of the table.
*/}
{tableDataArray ? (
<AddTable
tableHeaders={["Name", "Email", "uid", "Action"]}
tableData={tableDataArray}
fetchNew={newfun}
setEditId={setEditId}
setShow={setShow}
setOldUid={setOldUid}
/>
) : (
""
)}
<AddForm
fetchNew={newfun}
show={show}
setShow={setShow}
handleClose={handleClose}
editId={editId}
oldUid={oldUid}
/>
<Pagination className="float-end">
<Pagination.Item
className="shadow-none"
size="lg"
onClick={() => {
prevPage(prevVisible);
newfun();
}}
>
Previous
</Pagination.Item>
<Pagination.Item
className="shadow-none"
size="lg"
onClick={() => {
nextPage(lastVisible);
newfun();
}}
>
Next
</Pagination.Item>
</Pagination>
</div>
);
};
export default SuperAdmin;

Use startAt() or startAfter() for that
firestore
.collection("Users")
.startAt(0)
.limit(10)
.get()