title: Error : Cannot read property 'map' of undefined
body: <p>I'm following the <code>reactjs</code> tutorial, and I keep running into an issue when<br/> <strong>passing the value from the state of one component into another component</strong>.<br/></p>
  
  <p>The error <code>Cannot read property 'map' of undefined'</code> 
  is thrown when the <code>map</code> function in the <code>CommentList</code> component is executed.</p>
  
  <blockquote>
    <p>What would cause the <code>prop</code> to be <code>undefined</code> when passing from <code>CommentBox</code> into the <code>CommentList</code>? </p>
  </blockquote>
  
  <pre class="lang-js prettyprint-override"><code>// First component
  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function (comment){
        return &lt;div&gt;&lt;h1&gt;{comment.author}&lt;/h1&gt;&lt;/div&gt;;
      });
      return &lt;div className="commentList"&gt;{commentNodes}&lt;/div&gt;;
    }
  });
  // Second component    
  var CommentBox = React.createClass({
     getInitialState: function(){
       return {data: []};
     },
     getComments: function(){
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          success: function(data){ this.setState({data: data}) }.bind(this),
          error: function(xhr, status, err){ console.error(url, status, err.toString()) }.bind(this)
        });
     },
     componentWillMount: function(){
        this.getComments()
     },
     render: function(){
        return &lt;div className="commentBox"&gt;{&lt;CommentList data={this.state.data.comments}/&gt;}&lt;/div&gt;;
     }
  });
  
  React.renderComponent( &lt;CommentBox url="comments.json" /&gt;, document.getElementById('content'));
  </code></pre>