How to map through the data and return the documents

Question

Here I want to display image, name, profileImage in the post component. At the beginning when I hard coded the component its being display. but when I fetch data from firebase firestore it wont show.

My code is like,

function PostView() {

const [users, setUsers] = useState([]);

useEffect(() => 
    onSnapshot(collection(db, 'users'), (snapshot) =>{
        setUsers(snapshot.docs.map(doc => ({...doc.data(), id: doc.id})))
    })
,[])

return(
    <Container>
        
            <Post>
            <PostHeader>
            {users.map(user => {
                <Details>
                    <img src="https://scontent.fcmb1-2.fna.fbcdn.net/v/t1.6435-1/p240x240/242493320_1241149729697908_2159125378599502668_n.jpg?_nc_cat=107&ccb=1-5&_nc_sid=7206a8&_nc_ohc=1t7tMDC5RpsAX9WzrMX&_nc_ht=scontent.fcmb1-2.fna&oh=266e29db20581ce3ab83ce9662817e70&oe=61A5C5AC" alt="" />
                    <span style={{marginLeft: 10}}>Profile Name</span>
                </Details>
                })}
                <span style={{fontSize: 22}}>...</span>
            </PostHeader>
            <PostImage src='https://th.bing.com/th/id/R.e634d465fc117284db4f81ecceabbf4e?rik=HeQgRgW%2blF6djQ&pid=ImgRaw&r=0' />
            <PostFooter>
                <Likes>
                    <img src="https://img.icons8.com/material-outlined/24/000000/filled-like.png"/>
                    <img src="https://img.icons8.com/material-outlined/24/000000/speech-bubble.png"/>
                </Likes>
                <img src="https://img.icons8.com/material-outlined/24/000000/share.png"/>
            </PostFooter>
        </Post>
       
    </Container>
  )
}

but when I use firestore data it wont show,

<Container>
        {users.map(user => {
            <Post>
            <PostHeader>
                <Details>
                    <img src={user.profileImage} alt="" />
                    <span style={{marginLeft: 10}}>{user.name}</span>
                </Details>
                <span style={{fontSize: 22}}>...</span>
            </PostHeader>
            <PostImage src={user.postImgUrl} />
            <PostFooter>
                <Likes>
                    <img src="https://img.icons8.com/material-outlined/24/000000/filled-like.png"/>
                    <img src="https://img.icons8.com/material-outlined/24/000000/speech-bubble.png"/>
                </Likes>
                <img src="https://img.icons8.com/material-outlined/24/000000/share.png"/>
            </PostFooter>
        </Post>
        })}
    </Container>

See also: [Arrow function without curly braces](https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces) — 3limin4t0r, Nov 02 '21 at 09:49

score 3 · Accepted Answer · answered Nov 02 '21 at 08:51

3

You needs return anything in the map function, and set a unique key for every mapped item:


{users.map(user => {
   return <Post key={user.id}> .... </Post>

answered Nov 02 '21 at 08:51

Tonio

1,642
1
4
10

How to map through the data and return the documents

1 Answers1