title: How can I map through this data? Error says 'Cannot read property 'map' of undefined'
body: <p>I keep on having this error:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  <p>I'm using a useEffect to retrieve the data from firestore</p>
  <pre><code> const [users, setUsers] = useState();
  
    useEffect(() =&gt; {
      const unsubscribe = firestore
        .collection(&quot;users&quot;)
        .doc(result)
        .onSnapshot((snapshot) =&gt; {
          const arr = [];
          arr.push({
            ...snapshot.data(),
          });
  
          setUsers(arr);
          console.log(JSON.stringify(arr));
        });
  
      return () =&gt; {
        unsubscribe();
      };
    }, []);
  </code></pre>
  <p>JSON.strinify result of the data:</p>
  <pre><code>[
    {
      email: &quot;hello@gmail.com&quot;,
      createdDate: { seconds: 1629266050, nanoseconds: 525000000 },
      displayName: null,
    },
  ];
  </code></pre>
  <p>this is inside my functional component of which I keep having the error saying cannot read property of map</p>
  <pre><code>  {users.map((user) =&gt; (
            &lt;li&gt;{user.email}&lt;/li&gt;
          ))}
  </code></pre>