React Cloud Firestore Not Fetching Data Properly - reactjs

Question

I need to fetch all data from the collection but instead only getting one document. I will be grateful for you support. Below, I present the screenshots and code snippet regarding my concern.
enter image description here
enter image description here
import './App.css';
import db from './firebase';
import React,{useState,useEffect} from 'react';
function App() {
const [accounts,setAccounts]=useState([])
const fetchAccounts=async()=>{
const response=db.collection('accounts');
const data=await response.get();
data.docs.forEach(item=>{
setAccounts([...accounts,item.data()])
})
}
useEffect(() => {
fetchAccounts();
}, [])
return (
<div className="App">
{
accounts && accounts.map(account=>{
return(
<div>
<h1>Example</h1>
<h4>{account.date}</h4>
<p>{account.email}</p>
</div>
)
})
}
</div>
);
}
export default App;

Answer 1

Set state functions in React are async. It means that your values are not updated immediately.
So when you update your state in a loop, each time it updates the initial value of the state and because of that at the end of the loop, only 1 item is added to the array.
In order to fix the bug, you should use another variable and set your state after the loop:
import React, { useState, useEffect } from 'react';
import './App.css';
import db from './firebase';
function App() {
const [accounts, setAccounts] = useState([]);
const fetchAccounts = async () => {
const response = db.collection('accounts');
const data = await response.get();
const newAccounts = data.docs.map(item => item.data());
setAccounts(newAccounts);
}
useEffect(() => {
fetchAccounts();
}, [])
return (
<div className="App">
{
accounts && accounts.map(account => {
return(
<div>
<h1>Example</h1>
<h4>{account.date}</h4>
<p>{account.email}</p>
</div>
)
})
}
</div>
);
}
export default App;