Unable to render collection data from firebase in react

Question

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

Please add the error log you are getting when you said "map function does not appear to be working". Or explain what you want to do exactly — Andres Gardiol
– Andres Gardiol, Commented Jul 22, 2021 at 20:07

Mohd Amir · Accepted Answer · 2021-07-22 19:58:32Z

1

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

answered Jul 22, 2021 at 19:58

Mohd Amir

10711 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Daniel Butler Over a year ago

Thanks been scratching my head on this for ages :)

Collectives™ on Stack Overflow

Unable to render collection data from firebase in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related