title: How to pass an array of items in React.js
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ListItem = React.createClass({
    render: function() {
      return &lt;li &gt; {
        this.props.item
      } &lt; /li&gt;;
    }
  });
  
  const ToDoList = React.createClass({
    render: function() {
  
      const todoItems = this.props.items.map(item =&gt; {
        return &lt;ListItem item = {
          item
        } &gt; &lt; /ListItem&gt;
      })
  
      return ( &lt;
        ul &gt; {
          todoItems
        } &lt; /ul&gt;
      );
    }
  });
  
  //creating a basic component with no data, just a render function
  const MyApp = React.createClass({
    render: function() {
      return ( &lt;
        div className = "well" &gt;
        &lt;
        h1 &gt; Hello &lt; /h1&gt; &lt;
        ToDoList &gt; &lt; /ToDoList&gt; &lt;
        /div&gt;
      );
    }
  });
  
  //insert the component into the DOM
  ReactDOM.render( &lt; MyApp / &gt; , document.getElementById('container'));
  
  
  
  &lt;
  div id = "container" &gt; &lt; /div&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>A ReactJs tutorial says:</p>
  
  <blockquote>
    <p>If we want to make this a truly extensible list, we could create an array of items, then pass them into props through the ToDoList component, then render out each item. Let's do that now.</p>
  </blockquote>
  
  <p>How can I pass the array of items in the above code?</p>