title: React tutorial: Uncaught TypeError: Cannot read property 'data' of null
body: <p>I'm following React tutorial at: <a href="http://facebook.github.io/react/docs/tutorial.html" rel="noreferrer">http://facebook.github.io/react/docs/tutorial.html</a></p>
  
  <p>I'm just <strong>after</strong> <a href="http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server" rel="noreferrer">http://facebook.github.io/react/docs/tutorial.html#fetching-from-the-server</a></p>
  
  <p>I went through similar questions on SO but not found a solution for my specific case.</p>
  
  <pre><code>var data = [
      {author: "Pete Hunt", text: "This is one comment"},
      {author: "Jordan Walke", text: "This is *another* comment"},
      {author: "Bob Lilly", text: "This is *another* comment 2"}
  
  ];
  
  var Comment = React.createClass({
      render: function() {
          var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
          return (
              &lt;div className="comment"&gt;
                  &lt;h2 className="commentAuthor"&gt;
                      {this.props.author}
                  &lt;/h2&gt;
                  &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  var CommentList = React.createClass({
      render: function() {
          var commentNodes = this.props.data.map(function (comment) {
              return (
                  &lt;Comment author={comment.author}&gt;
                      {comment.text}
                  &lt;/Comment&gt;
              );
          });
          return (
              &lt;div className="commentList"&gt;
                  {commentNodes}
              &lt;/div&gt;
          );
      }
  });
  
  var CommentForm = React.createClass({
      render: function() {
          return (
              &lt;div className="commentForm"&gt;
                  &lt;br/&gt;Hello, world! I am a CommentForm.
              &lt;/div&gt;
          );
      }
  });
  
  var CommentBox = React.createClass({
      render: function() {
          return (
              &lt;div className="commentBox"&gt;
                  &lt;h1&gt;Comments&lt;/h1&gt;
                  &lt;CommentList data={this.props.data} /&gt; 
                  &lt;CommentForm /&gt;
              &lt;/div&gt;
          );
      }
  });
  
  
  React.render(
      // &lt;CommentBox url="comments.json" /&gt;, 
      &lt;CommentBox data={data} /&gt;,
      document.getElementById('content')
  );
  </code></pre>
  
  <p>When I try to use data got from server (first step  --> see 2nd link), I get this error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'data' of null</p>
  </blockquote>
  
  <p>I guess this has something to do with passing data the wrong way.</p>
  
  <p><strong>EDIT</strong>: I edited the cod with the answers given so far</p>
  
  <p><strong>EDIT 2</strong>: Now it works with dumb data (var data = [ ... ) but not when got from the server</p>