Cannot destructure property 'docs' of 'Object(...)(...)' as it is undefined

Question

i'm trying to display images on a gallery by mappping through my images' collection in cloud Firestore, using useContext() but i have this error "Cannot destructure property 'docs' of 'Object(...)(...)' as it is undefined"

Context:

import { projectFirestore } from '../Firebase'
import { useEffect, useState, useContext, createContext} from 'react'

const FireStoreContext = createContext()

export function useFireStore(){
    return useContext(FireStoreContext)
}


export function GalleryProvider({collection, children}){
    
    const [docs, setDocs] = useState([]);
    
    useEffect(() => {
        const unsub = projectFirestore.collection('images')
        .orderBy('createdAt', 'desc')
        .onSnapshot(snap => {
            let documents = [];
            
            snap.forEach(doc => {
                documents.push({...doc.data(), id: doc.id});
            });
            setDocs(documents);
        });
        return () => unsub();
    }, ['images']);
    
    return (
        <FireStoreContext.Povider value={{docs: docs}}>
            {children}
        </FireStoreContext.Povider>
    )
}

Gallery Comp:

import {useFireStore, GalleryProvider} from '../../hooks/useFireStore'
import './Gallery.css'


 function Gallery() {
  
     const { docs } = useFireStore('images');

     return (
         <GalleryProvider>
    <div className="img_grid">
    { docs && docs.map(doc =>{
        <div className="imgWrap" key={doc.id}>
            <img src={doc.url} alt="gallery" />
        </div>
    })}
    </div>
         </GalleryProvider>
    )
}
 export default Gallery

try to console.log(useFireStore('images')) so u and I will see what the structure of useFireStore('images') — Aliaksandr Pitkevich, Jun 10 '21 at 08:24
have you tried using single braces for the value prop like this : `value={docs}` — Aniket Agarwal, Jun 10 '21 at 14:10
if u got useFireStore('images') === undefined => u should understand whats wrong with useContext(FireStoreContext) — Aliaksandr Pitkevich, Jun 10 '21 at 14:46

score 0 · Answer 1 · answered Jun 10 '21 at 08:41

0

console.log(useFireStore('images')) returns undefined

answered Jun 10 '21 at 08:41

PazzeG

127
1
13

Cannot destructure property 'docs' of 'Object(...)(...)' as it is undefined

1 Answers1