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.

  

  
  
    
 Text here. 
  

  
  
    
 Text here. 
  

Unfortunately, this.props.children is undefined. Is there a way to dynamically get these children of Page and render them in TableOfContents?

Edit: Here is my page component. It is really just a big render method to tie a bunch of other components together.

/** @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 (
      

        

      

      
      

       Text goes here.
      
    
   
 
 );
 }
});

 module.exports = Page;