CODEWITHSUNDEEP
reactjs
poldeeek
poldeeek

Reputation: 333

Can't display elements of array React

I can see my array in state, but I don't know why elements of array doesn't display on the app interface.

const [members, setMembers] = useState([])

useEffect( () => {
    getMembers();
}, [props.event])



const getMembers = () => {
    let new_members = [];
    console.log(props.event)
    props.event &&  props.event.uczestnicy.map(member => {
        member.get().then(doc => {
            let new_member;
            new_member = {
                ...doc.data(),
                id: doc.id
            }
            new_members.push(new_member)
        })
        setMembers(new_members)
    })
    console.log(new_members)
    console.log(members)    
}

[...]

{members && members.map(member => {
    console.log('mem',member)
    return(
        <div key={member.id}>
            {member.nick}
        </div>
    )
})}

enter image description here

So I can see this array in Components using React Developer Tools, but even console.log doesn't see it in the moment of performing.

And console.log(new_members) and console.log(members) result : enter image description here

Upvotes: 1

Views: 280

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281686

Your member values are fetch asynchronously, so its ideal if you set state only after all the values are resolved. For this you can use a Promise.all 

const getMembers = async () => {
    let new_members = [];
    console.log(props.event)
    if(props.event) {
      const val  = await Promise.all(props.event.uczestnicy.map(member => {
        return member.get().then(doc => {
            let new_member;
            new_member = {
                ...doc.data(),
                id: doc.id
            }
            return new_member
        })
     });
     setMembers(values);
     console.log(values);
   } 
}

Upvotes: 1

Related Questions