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

This article represents concepts around usage of “map” method to traverse and display list of similar objects representing a component in ReactJS. The title represents “this.props.items.map”, although it could be anything such as “this.props.profiles.map” like in 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 to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

• Map is NOT a feature of ReactJS
• Code Sample – Usage of “map” as in this.props.profiles.map

Map is NOT a feature of ReactJS

After looking at tutorial provided on this ReactJS tutorials page where the reference of .map is made to display Comment objects, one may get confused that “map” is ReactJS feature. As a matter of fact, this is an 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 could related “map” function as a method to which a function is passed with parameter representing reference of object stored in array. When “map” is called, the function is applied to each of the object stored in array. The “map” returns a new array consisting of objects which might be created using objects of passed array.

The general syntax is:

array.map(func)

where func should take one parameter.

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

var newarr = [1,2,3,4].map( function(item) { return item * 5; } );
newarr is [5,10,15,20]

Code Sample – Usage of “map” as in this.props.profiles.map

In example below, notice some of the following:

• 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>