Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React JS: Explanation of this.props.items.map feature

Tags:

I am using React JS for Rendering the HTML content. The issue is I am not able to understand particular section of code what it does.

If you can see a basic sample of a Todo List from the below link http://facebook.github.io/react/

<script type='text/jsx'>         /** @jsx React.DOM */           var TodoList = React.createClass({                 render: function(){                          var createItem = function(itemText) {                           return <li>{itemText}</li>;                         };                         return <ul>{this.props.items.map(createItem)}</ul>;                     }             });          var TodoApp = React.createClass({                 getInitialState: function(){                     return {items:[], text: ''}                 },                 onChange: function(e)                 {                     this.setState({text: e.target.value});                 },                 handleSubmit: function(e)                 {                     e.preventDefault();                     var nextItems = this.state.items.concat([this.state.text]);                     var nextText = ''                     this.setState({items: nextItems, text: nextText});                 },                 render:function(){                     return (                         <div>                             <h3>ToDo List</h3>                             <TodoList items={this.state.items}/>                             <form onSubmit={this.handleSubmit}>                                 <input type="text" onChange={this.onChange} value={this.state.text}/>                                 <button>Add #{this.state.items.length+1}</button>                             </form>                          </div>                     )                 }             });          React.render(<TodoApp />, document.getElementById('toDoListApp'));     </script> 

I am basically not able to understand what map does and how create item parameters are working. Could anyone provide details on the same:

var TodoList = React.createClass({                     render: function(){                              var createItem = function(itemText) {                               return <li>{itemText}</li>;                             };                             return <ul>{this.props.items.map(createItem)}</ul>;                         }                 }); 

Thanks, Ankit

like image 377
Ankit Tanna Avatar asked Mar 05 '15 14:03

Ankit Tanna


People also ask

What is map () in React?

In React, the map method is used to traverse and display a list of similar objects of a component. A map is not a feature of React. Instead, it is the standard JavaScript function that could be called on an array. The map() method creates a new array by calling a provided function on every element in the calling array.

How do I map a map within a function in ReactJS?

To use a map() inside a map() function in React: Call map() on the outer array, passing it a function. On each iteration, call the map() method on the other array.

What does this props mean in React?

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.


2 Answers

map is not a feature of React.js. You can call this function on any array you want. You should look at its documentation at MDN for that.

Basically, map is for converting an array to another array with modified items. For example:

[1,2,3].map(function(item){     return item+1; }) 

would return a new array like this: [2,3,4]

In your example, map is used to convert an array with items of type "string" to an array of React.DOM.li elements.

The autor of your example could also have done it like this

var TodoList = React.createClass({     render: function(){         return <ul>{this.createItems(this.props.items)}</ul>;     },     createItems: function(items){         var output = [];         for(var i = 0; i < items.length; i++) output.push(<li>{items[i]}</li>);         return output;     } }); 
like image 89
Van Coding Avatar answered Sep 17 '22 13:09

Van Coding


props is an object containing properties passed from a parent to a child component.

So props.items is the property named items which is an array.

props.item.map() maps the items arrary to an array of lis.

like image 27
helpermethod Avatar answered Sep 19 '22 13:09

helpermethod