return statement inside a promise in a loop is not working

Question

const renderPicCards=()=>{
    return albums.assets.map(element => {  
      AsyncStorage.getItem(element.filename).then((result)=>{
        return(    
          <PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />
          )
      })
        .catch((err)=>{console.log('error is',err)})  
    
})

}

here the return statement is not working; asyncstorage will result in a promise..what am i doing wrong here? i basically want a list of cards whose one prop is being fetched fro asyncstorage library

Does this answer your question? [Using promise function inside Javascript Array map](https://stackoverflow.com/questions/39452083/using-promise-function-inside-javascript-array-map) — Brett East, Mar 06 '21 at 08:20
@navaneeth001 I think you should wrap code inside map in promise or you can use async await. — Vikas, Mar 06 '21 at 08:33
I don't think you can render anything asynchronously, with or without a loop. You need to fetch the data, store it in the state and render components based on the state — Nadia Chibrikova, Mar 06 '21 at 08:39

score 0 · Answer 1 · answered Mar 06 '21 at 08:36

0

I believe adding a return before AsyncStorage will solve your problem.

return albums.assets.map(element => {  
  return AsyncStorage.getItem(element.filename).then((result)=>{
    return(    
      <PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />
      )
  })
    .catch((err)=>{console.log('error is',err)})

answered Mar 06 '21 at 08:36

Antonis S

733
6
15

no its not working ..seems like the promise havent resolved yet – navaneeth001 Mar 06 '21 at 09:07

score 0 · Answer 2 · answered Mar 06 '21 at 09:59

You should async/await response from AsyncStorage.

const renderPicCards = () => {
   return albums.assets.map( async (element) => {
      try {
         const result = await AsyncStorage.getItem(element.filename);
         return (<PicCard imageUri={element.uri} key={element.id} Temperature={result.Temperature} />);
      } catch (err) {
         console.log('error is', err);
      }
   });
};

score 0 · Accepted Answer · answered Mar 08 '21 at 17:01

i solved this problem by fetching the async data inside the subcomponent piCard instaed of in the main component like this and it works fine..Thanks :)

`function picCard(props) {
const [details,setdetails]=useState(null);
useEffect(() => {
  AsyncStorage.getItem(props.filename).then((result)=>{
    setdetails(JSON.parse(result))
  }).catch((err)=>{console.log('error is',err)});
}, [])
...more code

return statement inside a promise in a loop is not working

3 Answers3