{React Native} Async\Await not working properly with setSate

Question

Can someone help me understand what I am not doing correctly? Consider this simple code

 var images = []; 
 const [funImage, setFunImage] = useState([]);


//Som         


        

Answer 1

The code doesn't work because your forEach is running async code. Which means it will finish running after you set your images. Here's a fix with some explanations in comments -

// No need for images array outside
const [funImage, setFunImage] = useState([]);

...

firebase.firestore().collection('PostedFunActivities').where("location", "==" , place).get().then(async (querySnapshot) =>{
    // instead of foreach, using map to aggregate the created promises into one array
    // Promise.all takes an array of promises and resolves after all of them completed running
    // returns an array with the promise results
    const images = await Promise.all(querySnapshot.map(async(doc) =>{ 
        const ref = firebase.storage().ref('images/'+ doc.data().image)
        const result = await ref.getDownloadURL();
        return result;                                         
    }));
    setFunImage(images);
});