title: Render array's nested object values react
body: <p>Here is how my <code>savedLinksData</code> array prints in my console:</p>
  <p><a href="https://i.stack.imgur.com/2EKer.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2EKer.png" alt="enter image description here" /></a></p>
  <p>Here is my code that attempts to get the <code>linkType</code> value:</p>
  <pre class="lang-js prettyprint-override"><code>  {savedLinksData.map((saved) =&gt; {
          return &lt;h1&gt;{saved.linkType}&lt;/h1&gt;;
        })}
  </code></pre>
  <p>What I'm doing wrong?</p>
  <p>I think there may be something wrong with the way I stored the values in the array. It doesn't look like the value are inside of the array.</p>
  <p>Picture of <code>console.log(&quot;-----&gt;&quot;, saved)</code></p>
  <p><a href="https://i.stack.imgur.com/q4zr6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4zr6.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/q4zr6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q4zr6.png" alt="enter image description here" /></a></p>
  <pre class="lang-js prettyprint-override"><code>const [savedLinksData, setSavedLinksData] = useState([]);
  
    // query for saved links data
    useEffect(() =&gt; {
      if (user) {
        async function fetchData() {
          const request = await db
            .collection(&quot;users&quot;)
            .doc(user)
            .collection(&quot;saved&quot;)
            .onSnapshot((snapshot) =&gt;
              setSavedLinks(
                snapshot.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id }))
              )
            );
        }
        fetchData();
      } else {
        setSavedLinks([]);
      }
    }, [user]);
  
    useEffect(() =&gt; {
      if (savedLinks.length &gt; 0) {
        let newArray = [];
        savedLinks.map((saved) =&gt; {
          db.collection(&quot;users&quot;)
            .doc(saved.savedUser)
            .collection(&quot;links&quot;)
            .doc(saved.savedLinkId)
            .get()
            .then(function (doc) {
              if (doc.exists) {
                // console.log(&quot;Document data:&quot;, doc.data());
                newArray.push(doc.data());
                // setSavedLinksData([...savedLinksData, doc.data()]);
              } else {
                // doc.data() will be undefined in this case
                console.log(&quot;No such document!&quot;);
              }
            })
            .catch(function (error) {
              console.log(&quot;Error getting document:&quot;, error);
            });
        });
        setSavedLinksData(newArray);
      }
    }, [savedLinks]);
  </code></pre>