CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
Daniel Butler
Daniel Butler

Reputation: 11

Unable to render collection data from firebase in react

I'm trying to retrieve a collection from firebase and then use a map to loop through the docs and render some UI elements, please see the code below, I can see the correct data in the console.log at line 20 but the map function does not appear to be working.

 function Candidates() {

const [visibleProfiles, setVisibleProfiles] = useState([])


useEffect(()=>{

    const getProfiles = firestore.collection("visible-profiles")
    .onSnapshot(snapshot => {
        const list = snapshot.docs.map((doc) => {
            return {id: doc.id, ...doc.data()}
        })

        setVisibleProfiles(list)
        console.log(list)
    })
    
    return () => getProfiles()

    return visibleProfiles

}, [])




return (
<>
<h1>CANDIDATES</h1>
    
        { visibleProfiles.map((obj, key) => {
            <>
            <p>{obj.location}</p>
            <CandidateCard
            firstname = {obj.firstname}
            lastname = {obj.lastname}
            title = {obj.title}
            profileImgUrl = {obj.profileImgUrl}
            location = {obj.location}
            />
            </>
        })}
    
</>    
);

Upvotes: 0

Views: 40

Answers (1)

Mohd Amir
Mohd Amir

Reputation: 107

Try with optional chaining and you have to return JSX

return (
  <>
    <h1>CANDIDATES</h1>
    {visibleProfiles && visibleProfiles.map((obj, key) => {
        return(<>
          <p>{obj.location}</p>
          <CandidateCard
            firstname = {obj.firstname}
            lastname = {obj.lastname}
            title = {obj.title}
            profileImgUrl = {obj.profileImgUrl}
            location = {obj.location}
          />
        </>);
     })}
  </>    
);

Upvotes: 1

Related Questions