1

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

Submitted July 22nd 2021 by Admin

Answers
0

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

Admin | 1 month ago



Relevant Questions