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

This article 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. Please feel free to comment/suggest if I missed one or more important points.

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
• Map is NOT a feature of ReactJS

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. Check out the MDN Documentation on this.

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:

<div id="content"></div>
<script type="text/jsx">
var profilesJson = [
{name: "Pete Hunt", country: "USA"},
{name: "Jordan Walke", country: "Australia"}];

var Profile = React.createClass({
render: function(){
          return(
              <div>
<div>Name: {this.props.name}</div>
<div>Country: {this.props.country}</div>
<hr/>
     </div>
);
    }
});

var UserProfiles = React.createClass({
render: function(){
var allProfiles = this.props.profiles.map(function(profile){
return (
<Profile name={profile.name} country={profile.country} />
);
});
return(
<div>{allProfiles}</div>
);
}
});
React.render( <UserProfiles profiles={profilesJson}/>, document.getElementById( "content"));</script>