Question 72418 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Why can't react show a section of my array, but it can show it whole? – Reactjs

So I’m trying to put in documente data from firebase’s firestore databate, no errors, if i log the whole documente i can see that it has everything i want, but when i want to log only a part it’s undefined, why is that?

import React, {useEffect, useState} from 'react'
import { Button, Container } from 'react-bootstrap'
import '../components/Inbox.css'
import Sidebar from "../components/sidebar"
import { collection, query, where, getDocs, setDoc, doc } from 'firebase/firestore'
import { db } from '../firebase'
import { AuthProvider, useAuth } from '../contexts/AuthContext'
import { Link } from 'react-router-dom'

function Inbox() {

  const {currentUser} = useAuth()
  const q = query(collection(db, 'mails'), where('recipient', '==', currentUser.email))
  const documente = useState([])
  
  async function emails() {

      try {
        const querySnapshot = await getDocs(q)
        querySnapshot.forEach((doc) => {
          documente.push({
            id: doc.id,
            title: doc.data().title,
            sender: doc.data().sender
          })
          console.log(documente.title) //this logs undefined and console.log(documente) logs out all the information so i know it s there
        })

      }
      catch {
        console.log('no work')
      }

    }

  useEffect(() => {emails()}, [])
    
    return (
    <>
    <AuthProvider>
        <Sidebar />
        {console.log(documente)}
    </AuthProvider>
    </>
  )
}

export default Inbox

I ve tried using other methods to store the documents but i havent been able to figure them out, this is the closest i ve been to being able to map the information

Tags:

2

Answers


  1. 0

    You are trying to access the properties of an array using the dot notation, which only works for objects. documente is an array and you are trying to access the title property which does not exist and it results in undefined.

    async function emails() {
    try {
        const querySnapshot = await getDocs(q);
        querySnapshot.forEach((doc) => {
            documente.push({
                id: doc.id,
                title: doc.data().title,
                sender: doc.data().sender
            });
            console.log(documente[documente.length - 1].title)
        });
    } catch {
        console.log('no work')
    }
}
    Login or Signup to reply.
  2. 0

    first this is not how u use State Hook in react. useState hook returns current state and a function that updates it so u need to destructure it like this:

    const [document, setDocument] = useState([]);

    and use setDocument only when u try to change the state of the component.

    async function emails() {

  try {
    const querySnapshot = await getDocs(q)
    setDocument(querySnapshot.map((doc) => {
       return { 
        id: doc.id,
        title: doc.data().title,
        sender: doc.data().sender
      }
      }))
  }
  catch {
    console.log('no work')
  }

}

    And second u are trying to access a title property of an array! If u want for example the first document u need to do it like this.

    console.log(document[0].title);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search