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
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.
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.
“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.
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; } });
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 li
s.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With