return statement inside a promise in a loop is not working

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

Answer

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

Leave a Reply

Your email address will not be published. Required fields are marked *