title: How to render list items in reactjs
body: <p>I am using <a href="http://www.material-ui.com/#/components/list" rel="nofollow noreferrer">List</a> to render the data vertically. Docs suggests a way  for hardcoded data but I have data in an array.</p>
  
  <p>Docs have this example :</p>
  
  <pre><code>&lt;MobileTearSheet&gt;
    &lt;List&gt;
      &lt;ListItem primaryText="Inbox" leftIcon={&lt;ContentInbox /&gt;} /&gt;
      &lt;ListItem primaryText="Starred" leftIcon={&lt;ActionGrade /&gt;} /&gt;
      &lt;ListItem primaryText="Sent mail" leftIcon={&lt;ContentSend /&gt;} /&gt;
      &lt;ListItem primaryText="Drafts" leftIcon={&lt;ContentDrafts /&gt;} /&gt;
      &lt;ListItem primaryText="Inbox" leftIcon={&lt;ContentInbox /&gt;} /&gt;
    &lt;/List&gt;
    &lt;Divider /&gt;
    &lt;List&gt;
      &lt;ListItem primaryText="All mail" rightIcon={&lt;ActionInfo /&gt;} /&gt;
      &lt;ListItem primaryText="Trash" rightIcon={&lt;ActionInfo /&gt;} /&gt;
      &lt;ListItem primaryText="Spam" rightIcon={&lt;ActionInfo /&gt;} /&gt;
      &lt;ListItem primaryText="Follow up" rightIcon={&lt;ActionInfo /&gt;} /&gt;
    &lt;/List&gt;
  &lt;/MobileTearSheet&gt;
  </code></pre>
  
  <p>I have <code>todos</code> array which I want to render in a <code>ListItem</code>. Can anyone suggest me how to do ?</p>
  
  <pre><code>this.state = {
    open: false,
    todos: [],
    notetext: ""
  };
  </code></pre>
  
  <p>I am adding elements in an array as below:</p>
  
  <pre><code>todos.push({
    id: todos.length,
    text: this.state.notetext,
    completed: false
  });
  </code></pre>