title: React JS - Uncaught TypeError: this.props.data.map is not a function
body: <p>I'm working with reactjs and cannot seem to prevent this error when trying to display JSON data (either from file or server):</p>
  
  <pre><code>Uncaught TypeError: this.props.data.map is not a function
  </code></pre>
  
  <p>I've looked at:</p>
  
  <p><a href="https://stackoverflow.com/questions/21074638/react-code-throwing-typeerror-this-props-data-map-is-not-a-function">React code throwing “TypeError: this.props.data.map is not a function”</a></p>
  
  <p><a href="https://stackoverflow.com/questions/28434789/react-js-this-props-data-map-is-not-a-function">React.js this.props.data.map() is not a function</a></p>
  
  <p>Neither of these has helped me fix the problem. After my page loads, I can verify that this.data.props is not undefined (and does have a value equivalent to the JSON object - can call with <code>window.foo</code>), so it seems like it isn't loading in time when it is called by ConversationList. How do I make sure that the <code>map</code> method is working on the JSON data and not an <code>undefined</code> variable?</p>
  
  <pre><code>var converter = new Showdown.converter();
  
  var Conversation = React.createClass({
    render: function() {
      var rawMarkup = converter.makeHtml(this.props.children.toString());
      return (
        &lt;div className="conversation panel panel-default"&gt;
          &lt;div className="panel-heading"&gt;
            &lt;h3 className="panel-title"&gt;
              {this.props.id}
              {this.props.last_message_snippet}
              {this.props.other_user_id}
            &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div className="panel-body"&gt;
            &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var ConversationList = React.createClass({
    render: function() {
  
      window.foo            = this.props.data;
      var conversationNodes = this.props.data.map(function(conversation, index) {
  
        return (
          &lt;Conversation id={conversation.id} key={index}&gt;
            last_message_snippet={conversation.last_message_snippet}
            other_user_id={conversation.other_user_id}
          &lt;/Conversation&gt;
        );
      });
  
      return (
        &lt;div className="conversationList"&gt;
          {conversationNodes}
        &lt;/div&gt;
      );
    }
  });
  
  var ConversationBox = React.createClass({
    loadConversationsFromServer: function() {
      return $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      this.loadConversationsFromServer();
      setInterval(this.loadConversationsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        &lt;div className="conversationBox"&gt;
          &lt;h1&gt;Conversations&lt;/h1&gt;
          &lt;ConversationList data={this.state.data} /&gt;
        &lt;/div&gt;
      );
    }
  });
  
  $(document).on("page:change", function() {
    var $content = $("#content");
    if ($content.length &gt; 0) {
      React.render(
        &lt;ConversationBox url="/conversations.json" pollInterval={20000} /&gt;,
        document.getElementById('content')
      );
    }
  })
  </code></pre>
  
  <p>EDIT: adding sample conversations.json</p>
  
  <p>Note - calling <code>this.props.data.conversations</code> also returns an error:</p>
  
  <pre><code>var conversationNodes = this.props.data.conversations.map...
  </code></pre>
  
  <p>returns the following error: </p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'map' of undefined</p>
  </blockquote>
  
  <p>Here is conversations.json:</p>
  
  <pre><code>{"user_has_unread_messages":false,"unread_messages_count":0,"conversations":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}
  </code></pre>