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

Question

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

Answer 1

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;
    }
});