title: Add children to React element
body: <p>How can I add a child to a React component. <code>this.props.children</code> seems to be read-only so can't mutate it directly.</p>
  
  <p>Let's say I have </p>
  
  <pre><code>var myComponent = &lt;MyComponent someProp="foo"&gt;&lt;h1&gt;heading&lt;/h1&gt;&lt;h2&gt;another heading&lt;/h2&gt;&lt;/MyComponent&gt;
  </code></pre>
  
  <p>and I'd like to add <code>&lt;p&gt;some text&lt;/p&gt;</code> as a third child to it.</p>
  
  <p>I'd like to accomplish this:</p>
  
  <pre><code>var newChild = &lt;p&gt;some text&lt;/p&gt;
  myComponent.props.children.add(newChild)
  </code></pre>
  
  <p>so that the result would be</p>
  
  <pre><code>&lt;MyComponent someProp="foo"&gt;&lt;h1&gt;heading&lt;/h1&gt;&lt;h2&gt;another heading&lt;/h2&gt;&lt;p&gt;some text&lt;/p&gt;&lt;/MyComponent&gt;
  </code></pre>
  
  <p>(obviously the add function doesn't exist but the question is what to do instead)</p>