title: Creating dynamic table of contents in ReactJS
body: <p>I have a component that represents a Page with several SectionHeader components as children of that page. I want to dynamically create a table of contents by inspecting the children of Page that are SectionHeaders.</p>
  
  <pre><code>&lt;Page&gt;
    &lt;TaleOfContents sections={this.props.children} /&gt;
  
    &lt;SectionHeader title={"Section A"} /&gt;
    &lt;TextBlock&gt;
      &lt;p&gt; Text here. &lt;/p&gt;
    &lt;/TextBlock&gt;
  
    &lt;SectionHeader title={"Section B"} /&gt;
    &lt;TextBlock&gt;
      &lt;p&gt; Text here. &lt;/p&gt;
    &lt;/TextBlock&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>Unfortunately, <code>this.props.children</code> is undefined. Is there a way to dynamically get these children of Page and render them in TableOfContents?</p>
  
  <p>Edit: Here is my page component. It is really just a big render method to tie a bunch of other components together.</p>
  
  <pre><code>/** @jsx React.DOM */
  
  var React = require('react/addons');
  
  // COMPONENTS
  var TextBlock = require('../text_block.jsx');
  var PaperHeader = require('../header_paper.jsx')
  var SectionHeader = require('../header_section.jsx');
  var TableOfContents = require('../table_of_contents.jsx');
  
  var Page = React.createClass({
  
    render: function() {
      return (
        &lt;div&gt;
          &lt;PaperHeader
          title={"Page Title"}
          authors={["Cole Gleason"]}
          /&gt;
  
        &lt;SectionHeader
         title={'First Section'}
         size={'large'}
        /&gt;
  
        &lt;TextBlock
        key={"text_first"}
        &gt;
        &lt;p&gt;
         Text goes here.
        &lt;/p&gt;
      &lt;/TextBlock&gt;
     &lt;this.props.activeRouteHandler/&gt;
   &lt;/div&gt;
   );
   }
  });
  
   module.exports = Page;
  </code></pre>