Image from Cloud Storage is not redendring in .map list

Question

I am making a list of posts in a .map fetching from my Firebase Cloud Firestore. I also have photos connecting to each post, and I fetch them by using the post.title +

Answer 1

I suspect that at the moment this function returns Text and Image components the promise which gets the images from the server is not yet resolved -- and thus nothing is displayed and the component doesn't re-render once the promise is done.

The typical way of fetching external resources in a React component is to use the class Component/PureComponent syntax, dispatch a fetch request in componentDidMount hook and save the data returned by the promise in state (using this.setState).

The render function should render based on the values in state -- so that once state is updated with the fetched value, the component will re-render using the fetched data.