title: this.props.children selecting innerHTML
body: <p>Lets say our component structure is as follows:</p>
  
  <ul>
  <li>CommentList
  
  <ul>
  <li>Comment</li>
  </ul></li>
  </ul>
  
  <hr>
  
  <p>CommentList is defined as:</p>
  
  <pre><code>var CommentList = React.createClass({
    render: function() {
      return (
        &lt;div className="commentList"&gt;
          &lt;Comment author="Pete Hunt"&gt;This is one comment&lt;/Comment&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>and Comment defined as</p>
  
  <pre><code>var Comment = React.createClass({
    render: function() {
      return (
        &lt;div className="comment"&gt;
          &lt;h2 className="commentAuthor"&gt;
            {this.props.author}
          &lt;/h2&gt;
          {this.props.children}
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>It seems a bit strange that <code>this.props.children</code> is selecting the text "This is one comment". Why is it called "children", shouldn't it be "innerHTML" or something? I feel like I'm missing something.</p>