Unable to retrieve all data from Firestore

[srivats22]

Hello Everyone,

First off I really love the new SDK, it's really easy to use and implement, with fewer lines of code. But I am having some issues in reading documents using React.js.

I have a collection called projects and I want to retrieve them. When I write the code and do a console.log(), it prints all the data. But when I render it, I get only 1 document. Not sure if I am doing it the right way. I am attaching my code and a screenshot of the output below. This project had the regular firebase SDK, but then I imported the new modular SDK. Not sure if that is causing the issue.

Code:

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

const firebaseApp = initializeApp({
    /*config data removed*/
})

function Projects(){
    const [proj, setProj] = useState([])
    const db = getFirestore(firebaseApp);
    
    const getProjects = async() => {
        const querySnapshot = await getDocs(collection(db, "projects"));
        querySnapshot.docs.forEach((item) => {
            console.log(item.data())
            setProj([...proj, item.data()])
        })
    }

    useEffect(() => {
        getProjects();
      }, [])

    return (
        <div>
          {
                proj && proj.map(proj=>{
                    return(
                        <div className="blog-container">
                        <h4>{proj.projectName}</h4>
                        <h4>{proj.projectDesc}</h4>
                        </div>
                    )
                })
            }
        </div>
    );

}

export default Projects;

Output:

Any help would be appreciated.

[hsubox76]

If there's a console log for every item it looks like Firebase is working correctly, and you probably have a problem with your React code. Do you possibly have a scoping problem by naming the project array and callback param the same thing (proj)? Maybe you should try attaching a unique key prop to each list item as the console warning suggests (maybe projectName)?

If you console.log proj (the array) after the forEach loop is done and it contains all 3 (? I think) of your items, I don't think it's a Firebase issue.

[srivats22]

Thank you for the reply. Let me try adding a unique key and seeing if it works, and also making some changes to the code.