title: How can I display data pulled from Firebase in React components?
body: <p>I am working on a website and learning React and Firebase. I am able to pull data from Firebase and display it on the page using a map and returning a div for each  element however I would like all the information pulled to be displayed in a component I created for them to have consistent styling with the rest of the page.</p>
  <p>When trying to cycle through the <code>posts</code> array, I get an error saying <code>Cannot read properties of undefined (reading 'id')</code> however when I <code>console.log</code> the array all the objects are displayed correctly. Is there a way to access the array by index or am I going about this the wrong way?</p>
  <p>Here is the MRE:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { TrendBar, TrendCard } from '../components'
  import { db } from '../firebase'
  import { collection, getDocs } from 'firebase/firestore'
  
  const Home = () =&gt; {
      const [posts, setPosts] = useState([]);
      const collectionRef = collection(db, 'posts');
  
      useEffect(() =&gt; {
          const getPosts = async () =&gt; {
              const data = await getDocs(collectionRef)
              setPosts(data.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id })))
          }
          getPosts()
      }, [])
  
      return (
  
          &lt;&gt;
          {/* displays all elements of the db on the page  */}
          {posts.map((post) =&gt; {
              return &lt;div&gt;
                  &lt;h1&gt;{post.title}&lt;/h1&gt;
              &lt;/div&gt;
          })}
  
          {/* Would like to display the elements like this */}
              &lt;TrendBar
                  firstTrend={
                      &lt;TrendCard
                          id={posts[0].id}
                          image={posts[0].image}
                          imageAlt={posts[0].imageAlt}
                          title={posts[0].title}
                          tags={posts[0].tags}
                      /&gt;
                    }
                  secondTrend={
                      &lt;TrendCard
                          id={posts[1].id}
                          image={posts[1].image}
                          imageAlt={posts[1].imageAlt}
                          title={posts[1].title}
                          tags={posts[1].tags}
                      /&gt;
                   }
              /&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>Thank you</p>