title: React Native: Iterating through an array of data pulled from firebase only renders the first item in the array
body: <p>My <code>useEffect()</code> function is retrieving data from firebase and only renders one <code>&lt;TaskItem/&gt;</code> on the screen.</p>
  <p>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.</p>
  <p>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.</p>
  <pre><code>useEffect(() =&gt; {
    if(userId!=='' &amp;&amp; id !== userId)
       setId(userId);
  
    if (id !== '') {
      let counter = 0;
        db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=&gt;{
          const tempTasks = [];
            snapshot.forEach(
               doc =&gt; {
                  var newData = doc.data();
                  newData.id = doc.id;
                  tempTasks.push(newData);
                  setTasks(tempTasks);
               }
            )
  
          setTasks(tempTasks);
               
        });
    }
  },[id, userId]);
  </code></pre>
  <pre><code>&lt;View style={styles.tasks}&gt;
                      
                          {temptasks.map((task) =&gt; {
                              return (
  
                                  &lt;View style={{ margin: 4}}&gt;
                                       &lt;TaskItem/&gt;
                                  &lt;/View&gt;
                              );
                          })}
                      &lt;/View&gt;
  </code></pre>