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

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