Unable to render collection data from firebase in react

  firebase, javascript, reactjs

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}
            />
            </>
        })}
    
</>    
);

Source: Ask Javascript Questions

LEAVE A COMMENT