title: TypeError: this.props.data.map is not a function
body: <p>As a beginner, I tried to create my first React application following the tutorial : <a href="https://facebook.github.io/react/docs/tutorial.html" rel="nofollow">https://facebook.github.io/react/docs/tutorial.html</a></p>
  
  <p>My server was running at <a href="http://localhost:3000" rel="nofollow">http://localhost:3000</a> after executing the command : perl server.pl </p>
  
  <p>This error was generated (viewed on FireBug) : TypeError: this.props.data.map is not a function</p>
  
  <p>Here is my code </p>
  
  <p>File : index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;React Tutorial&lt;/title&gt;
      &lt;!-- Not present in the tutorial. Just for basic styling. --&gt;
      &lt;link rel="stylesheet" href="css/base.css" /&gt;
      &lt;script src="https://unpkg.com/react@15.3.0/dist/react.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/react-dom@15.3.0/dist/react-dom.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/jquery@3.1.0/dist/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/remarkable@1.6.2/dist/remarkable.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="content"&gt;&lt;/div&gt;
  
      &lt;script type="text/babel"&gt;
  
      var Comment = React.createClass({
  
           rawMarkup: function() {
      var md = new Remarkable();
      var rawMarkup = md.render(this.props.children.toString());
      return { __html: rawMarkup };
    },
  
        render: function() {
          return (
            &lt;div className="comment"&gt;
              &lt;h2 className="commentAuthor"&gt;
                {this.props.author}
              &lt;/h2&gt;
              {this.props.children}
            &lt;/div&gt;
          );
        }
      });
  
      var CommentBox = React.createClass
      ({  
          loadCommentsFromServer: function()
          {               
              $.ajax({
                url: this.props.url,
                dataType: 'json',
                cache: false,
                success: function(data) {
                  this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                  console.error(this.props.url, status, err.toString());
                }.bind(this)
              });
            },
  
            handleCommentSubmit: function(comment){
  
               var comments = this.state.data;
              // Optimistically set an id on the new comment. It will be replaced by an
              // id generated by the server. In a production application you would likely
              // not use Date.now() for this and would have a more robust system in place.
              comment.id = Date.now();
              var newComments = comments.concat([comment]);
              this.setState({data: newComments});
  
              $.ajax({
                url: this.props.url,
                dataType: 'json',
                type: 'POST',
                data: comment,
                success: function(data) {
                  this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                  this.setState({data: comments});
                  console.error(this.props.url, status, err.toString());
                }.bind(this)
              });
            }, 
  
          getInitialState: function(){
              return {data: []};
          },
  
          componentDidMount: function()
          {
              this.loadCommentsFromServer();
              setInterval(this.loadCommentsFromServer, this.props.pollInterval);
          },  
  
          render: function(){
              return (
                  &lt;div className="commentBox"&gt;            
                  &lt;h1&gt;Comments&lt;/h1&gt;       
                  &lt;CommentList data="{this.state.data}" /&gt;
                  &lt;CommentForm onCommentSubmit={this.handleCommentSubmit} /&gt;
                  &lt;/div&gt;
              );
          }
      });
  
      var CommentList = React.createClass({
        render: function() {
          var commentNodes = this.props.data.map(function(comment) {
            return (
              &lt;Comment author={comment.author} key={comment.id}&gt;
                {comment.text}
              &lt;/Comment&gt;
            );
          });
          return (
            &lt;div className="commentList"&gt;
              {commentNodes}
            &lt;/div&gt;
          );
        }
      });
  
      var CommentForm = React.createClass
      ({
           getInitialState: function() {
              return {author: '', text: ''};
            },
            handleAuthorChange: function(e) {
              //alert(e.target.value);
              this.setState({author: e.target.value});
            },
            handleTextChange: function(e) {
              //alert(e.target.value);
              this.setState({text: e.target.value});
            },
              handleSubmit: function(e) {
              e.preventDefault();
              var author = this.state.author.trim();
              var text = this.state.text.trim();
              if (!text || !author) {
                return;
              }
              // TODO: send request to the server
              this.props.onCommentSubmit({author: author, text: text});
              this.setState({author: '', text: ''});
            },
          render: function()
          {
              return (
                  &lt;form className="commentForm" onSubmit={this.handleSubmit}&gt;
                       &lt;input
                        type="text"
                        placeholder="Your name"
                        value={this.state.author}
                        onChange={this.handleAuthorChange}
                      /&gt;
                      &lt;input
                        type="text"
                        placeholder="Say something..."
                        value={this.state.text}
                        onChange={this.handleTextChange}
                      /&gt;
                      &lt;input type="submit" value="Post" /&gt;
                  &lt;/form&gt;
              );
          }
      });
  
  
  
      ReactDOM.render(
          &lt;CommentBox url="/api/comments" pollInterval={2000} /&gt;,
          document.getElementById('content')
      );
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>File : comments.json</p>
  
  <pre><code>[
    {"id": "1", "author": "Pete Hunt TEST", "text": "This is one comment"},
    {"id": "2", "author": "Jordan Walke TEST", "text": "This is *another* comment"}
  ]
  </code></pre>