Cant update my array or state using Firebase - React Native

Question

I'm a little stuck developing my application. So far im able to connect to the Firestore db and get my documents. My plan is to fetch the data from each document and store it in an array. From there i will display it.

The issue im having is that the results from the first time render wont add the elements to the array. DATA.push() method works but its not saved outside of this forEach loop? Thanks!

const data is where the document ref is stored.

const DATA = [] is the array.

const [data, setdata]= useState([{}]);

useEffect(() => {
  const getUsers = async () => {
    const data = await getDocs(usersCollectionRef);
    data.forEach(doc =>{

      DATA.push({id: doc.id, title: doc.data().Type, status: doc.data().status, location: doc.data().Location, type: doc.data().Type, injured: doc.data().Injured, collar: doc.data().Collar, color: doc.data().Colour })
    
    })
    
  };

  getUsers();
  console.log(dataNew);
 
}, []);
const DATA = [];

What is difference in data old and data new? Also in which var the data from firestore query goes ? — Dharmaraj
– Dharmaraj, Commented Mar 7, 2022 at 9:03
@Dharmaraj The query is stored in const data = await getDocs(usersCollectionRef); — GarlicBread
– GarlicBread, Commented Mar 7, 2022 at 9:25

Dharmaraj · Accepted Answer · 2022-03-07 09:47:00Z

1

You can just map data from all documents in an array, set that in state and render it. Try refactoring the code as shown below:

const [data, setData]= useState([]);

useEffect(() => {
  const getUsers = async () => {
    const snapshot = await getDocs(usersCollectionRef);

    const data = snapshot.docs.maps(d => ({ id: d.id, ...d.data() }))
    console.log(data);

    setData(data);
  };

  getUsers();
}, []);


return(
  <div>
    { 
      data.map((d) => {
        <p>{ d.id }</p>
      })
    }
  </div>
)

answered Mar 7, 2022 at 9:47

Dharmaraj

51.3k8 gold badges68 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cant update my array or state using Firebase - React Native

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related