Creating Divs Automaticly With forEach - That Contain Data From Firestore-CodePudding

I'm trying to get a list of data from Firestore to automatically create and nest themselves in divs (one for each topic) I feel like Im close but I don't know what I'm doing wrong...

Here is my code

const querySnapshot = await getDocs(collection(db, "vhf", '1', 'week1'));
    querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
    //console.log(doc.id, " => ", doc.data());
    });

    querySnapshot.forEach(function(topics){
        // console.log('Topics From Function: ', topics.data().topic)
        
            let html = ''
            const weekData = topics.data();
            const li = `
            <li>
            <div >${weekData.topic}</div>
            </li>
            `;
        html  = li
        });

Could someone please help me get this working? I have patched this together from a tutorial and there are no errors with the code... But I don't understand the function of the let html = '' and the html = li

I also dont understand how to tell the code where to put the new <div> tags as id like them to be put into a specific div container.

Any help, amendments or feedback would be greatly appreciated

CodePudding user response：

querySnapshot.forEach(function(topics){
        // console.log('Topics From Function: ', topics.data().topic)
 
            const weekData = topics.data();
            return(
            <li>
            <div >${weekData.topic}</div>
            </li>
            )    
        });

CodePudding user response：

If anyone reads this question and needs an answer it is in this video:

https://www.youtube.com/watch?v=kIVg_yTiO3Q&list=PL4cUxeGkcC9jUPIes_B8vRjn1_GaplOPQ&index=9