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

What is the ReactJS this.props.items.map Property?

This should help you understand the concepts around the usage of the “map” method to traverse and display a list of similar objects representing a component in ReactJS. The title “this.props.items.map” could be any other map method, such as “this.props.profiles.map” which has examples below where profiles or items represent an array. It could be used to create a list, table, etc.

Here are the main points of this article:

• Map is NOT a feature of ReactJS
• See a code sample using “map” in the context of this.props.profiles.map

After looking at the tutorial provided on this ReactJS tutorials page where the reference of .map is made to display Comment objects, one may get confused and think that “map” is a ReactJS feature. As a matter of fact, this is a standard JavaScript function which could be called on any array

If you have worked on languages such as Python (apply method), or R (lapply method), you've probably used “map” as a method to pass a function with a parameter representing the reference of an object stored in an array. When “map” is called, the function is applied to each of the objects stored in the array. The “map” returns a new array consisting of objects which might be created using objects of the passed array

The general syntax is: array.map(func)

where func should take one parameter.

As mentioned in text above, the return value of array.map is another array.

Code sample using “map” in the context of this.props.profiles.map

In the example below, notice some of the following things:

• There are two components such as UserProfiles and Profile
• Profile component is used to represent actual profile comprising of name and country attributes.
• UserProfiles, as it sounds, is used to represents one or more profile and renders Profile components.
• Note that UserProfiles is passed a json object such as profilesJson which consists of profiles represented in form of JSON object.
• render method of UserProfiles displays “allProfiles” variable which is created using “map” method. The “map” method, in turn, returns an array Profile object.

Following is how the below code sample would be displayed on HTML: