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