How to render firestore doc in div

user_15513157 0
Viewed 33

Hoi, I want to render one div per firestore entry and pass the string stored there as h1.

The forEach works in console.log, but I get the error:

"Objects are not valid as a React child (found: [object Promise])."

Have tried around a lot now without success.

Can someone show me how to output this correctly? Thanks!

const docRef = collection(db_firestore, "student@test.de AND otherstudent@test.de");
const q = query(docRef, where("name", "!=", ""));
async function getUsers() {
  const querySnapshot = await getDocs(q);
  return ( <
    div > {
      querySnapshot.forEach((doc) => {
        <
        h1 > {
          doc.data().msg
        } < /h1> / / < -error

        {
          console.log(doc.id, " => ", doc.data());
        } // <- works fine
        {
          console.log(doc.data().msg)
        } // <- works fine
      })
    } <
    /div>
  )
}

return ( <
  div className = "main-class" > {
    getUsers()
  } <
  /div>
)
}

export default ChatContacts;
reactjs javascript
1 Answers

You can not use promise function in react render. I recommend you use useEffect. [console.log] was just updated promise returns.

const ChatContracts = function(props) {
    const [querySnapshot, setQuerySnapshot] = React.useState();
    
    React.useEffect(async () => {
        const docRef = collection(db_firestore,"student@test.de AND otherstudent@test.de");
        const q = query(docRef, where("name", "!=", ""));
        
        const querySnapshot = await getDocs(q);
        setQuerySnapshot(querySnapshot)
                
    }, [])
    
    return (
        <div>
            {querySnapshot.forEach((doc) => {
                
                <h1>{doc.data().msg}</h1> 
                
                {console.log(doc.id, " => ", doc.data());}
                {console.log(doc.data().msg)}
                
            })}
        </div>
    )
}
user_63587110
Related