Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

Understand the concepts around the usage of the “map” method to traverse and display a list of similar objects representing a component in ReactJS.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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>

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
react.js ,javascript

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}