Error "Cannot read property 'map' of undefined" while trying to read & display data from firestore via my react app

Question

I am trying to display the data read from my firestore collection, but after getting the data from firestore, I tried using a map function to map & display the data accordingly but it ends up with an error:

TypeError: Cannot read property 'map' of undefined

Which may indicate that my events are in a wrong format for the map function or the events are empty.

Here is my code for more clarification:

const [events, setEvents] = React.useState();
  // const events = [];

  React.useEffect(() => {
    db.collection("Events").get()
    .then(querySnapshot => {
      // const data = querySnapshot.docs.map(doc => doc.data());
      let events = [];
      querySnapshot.forEach(doc =>
        events.push({ ...doc.data() })
      )
      console.log(events);
      setEvents(events);
    });
  });

  return (
    <Grid item sm={4}>
      { events.map(event => (
        <Card className={classes.card}>
          <CardHeader
            avatar={
              loading ? (
                <Skeleton variant="circle" width={40} height={40} />
              ) :
              <Avatar
                alt="Ted talk"
                src={event.eventImgUrl}
              />
            }
 .... // code contiues

I expect the code to display data for each event accordingly

Frank van Puffelen · Accepted Answer · 2019-09-19 11:36:24Z

Since loading data from Firestore may take a while, the initial value of events is going to be null. From reading this answer, it seems you can pass in the initial value to React.useState(), in which case that line should be:

const [events, setEvents] = React.useState([]);

By initializing with an empty array ([]), the map function will just do nothing until the data is loaded.

Alternatively, you can only show the grid once the data is loaded, and show some sort of "loading..." message until that time. Something like:

if (items) {
  return (
    <Grid item sm={4}>
      { events.map(event => (
        <Card className={classes.card}>
          <CardHeader
            avatar={
              loading ? (
                <Skeleton variant="circle" width={40} height={40} />
              ) :
              <Avatar
                alt="Ted talk"
                src={event.eventImgUrl}
              />
            }
   .... // code continues
}
else {
  return (
    <div>Loading...</div>
  )
}

Mars2024 · Accepted Answer · 2022-03-03 05:47:48Z

0

I think someone could also try adding async await, worked for me just now, but I'm sure there are many other solutions like the above

 React.useEffect( async () => {
   const snapshot = await db.collection("Events").get()
    if (snapshot.empty) {
    console.log("No Docs found")
    }
      setEvents(
         snapshot.docs.map((doc) => {
         return {
         ...doc.data(),
         documentID: doc.id,
         }
      })
   );
    });
  });

answered Mar 3, 2022 at 5:47

Mars2024

3941 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Error "Cannot read property 'map' of undefined" while trying to read & display data from firestore via my react app

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related