React Native: Iterating through an array of data pulled from firebase only renders the first item in the array

Question

My useEffect() function is retrieving data from firebase and only renders one <TaskItem/> on the screen.

I pull the data and store it in temptasks in my state then that is rendered using map to display a component for each item.

There are five items in my backend firebase and using console log I can see they are all received but why is only the first one rendering. Re-rendering the page shows all 5.

useEffect(() => {
  if(userId!=='' && id !== userId)
     setId(userId);

  if (id !== '') {
    let counter = 0;
      db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
        const tempTasks = [];
          snapshot.forEach(
             doc => {
                var newData = doc.data();
                newData.id = doc.id;
                tempTasks.push(newData);
                setTasks(tempTasks);
             }
          )

        setTasks(tempTasks);
             
      });
  }
},[id, userId]);

<View style={styles.tasks}>
                    
                        {temptasks.map((task) => {
                            return (

                                <View style={{ margin: 4}}>
                                     <TaskItem/>
                                </View>
                            );
                        })}
                    </View>

Pierre · Accepted Answer · 2021-09-14 22:14:58Z

1

There is no render because you update the state with the same array (it has the same reference). You have to return an enriched copy.

useEffect(() => {
  if(userId!=='' && id !== userId)
     setId(userId);

  if (id !== '') {
    let counter = 0;
      db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
        const tempTasks = [];
          snapshot.forEach(
             doc => {
                var newData = doc.data();
                newData.id = doc.id;
                tempTasks.push(newData);
                setTasks(tempTasks); // Not this
                setTasks([...tempTasks, newData]); // But this
             }
          )

        setTasks(tempTasks); // no effect
             
      });
  }
},[id, userId]);

edited Sep 14, 2021 at 22:14

answered Sep 14, 2021 at 21:30

Pierre

4322 silver badges8 bronze badges

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

3 Comments

Matt Laszcz Over a year ago

I am receiving undefined though when I log tempTasks it appears to be empty?

Pierre Over a year ago

Sorry it's setTasks([...tempTasks, newData]); // But this

Matt Laszcz Over a year ago

oh yes that was creating an object

Frank van Puffelen · Accepted Answer · 2021-09-14 22:44:18Z

1

While Pierre's answer works perfectly fine, you can do the same with a lot less code by using the docs array, and a spread (...) operator:

db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
  const tempTasks = snapshot.docs.map(doc => {
    return { ...doc.data(), id: doc.id };
  })

  setTasks(tempTasks);         
});

Or even shorter (although we might lose some readability in this step):

db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
  setTasks(snapshot.docs.map(doc => {
    return { ...doc.data(), id: doc.id };
  }));
});

answered Sep 14, 2021 at 22:44

Frank van Puffelen

603k85 gold badges896 silver badges869 bronze badges

Collectives™ on Stack Overflow

React Native: Iterating through an array of data pulled from firebase only renders the first item in the array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related