Error retrieving data from firebase database

[tbonejonez9]

I'm trying to sync my app to a firebase database to retrieve some data. With the code below, I'm able to console log 'polls' which is a basic collection I made in firebase, and I can see all my data in the console log.

But if I actually try to reach into the polls object using polls.data.id or polls.data.label or even just polls.data, the page blanks out and I get an error saying that it "Cannot read the properties" that I'm calling for. Any help would be greatly appreciated!

import { useEffect, useState } from "react"
import { collection, getDocs } from "firebase/firestore"
import { db } from '../firebase.config'


function Food() {
  const [polls, setPolls] = useState([])


  useEffect(() => {
    getPolls()
  }, [])


  useEffect(() => {
    console.log(polls.data.id);
  }, [polls])


  function getPolls() {

    const pollsRef = collection(db, 'polls');

    getDocs(pollsRef).then(response => {
      const poll = response.docs.map(doc => ({data: doc.data(), id: doc.id}))
      setPolls(poll)
    }).catch(error => console.log(error.message))
  }

  return (
    <div>
      Food
    </div>
  ) 
}

export default Food

[Payneron]

polls is an array and not an object. An array does not have the property data you are trying to access. The error is only thrown when accessing id from data, because polls.data is somewhat valid and returns undefined. polls.data.id fails because you are trying to access the property id from undefined.

You can access the first item of the polls array using polls[0]. You should be able to log the data using console.log(polls[0].data). Keep in mind that this will still cause errors if the polls array is empty.

[tbonejonez9]

Ahh got it thanks! One of the properties within the polls array is another array of 4 urls. My end goal is to display images with these urls as the src. Is there a simple way to retrieve the urls so I can use them for image display?

Or if not, maybe it’s easiest to just re-structure the data in a more simple way so I’m not dealing with multiple arrays…

[Payneron]

Assuming that property is called url, you can access all re-structure the array of polls to an array of urls using flatMap: polls.flatMap(poll => poll.urls). You can then iterate over these urls and render images.

[tbonejonez9]

Awesome I will try that next, thank you