title: ReactJS and complex JSON object
body: <p>I followed ReactJS tutorial, which is quite simple to accomplish more complex stuff.</p>
  
  <p>In my case, I would like to use a complex JSON object, which contains a map, a single value, a list, etc... Here is the code:</p>
  
  <pre><code>    var NotificationStatus = React.createClass({
      loadNotificationsFromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          success: function(data) {
            this.setState({data: data});
            console.log(this.state.data.notificationType);
          }.bind(this)
        });
      },
      getInitialState: function() {
        return {data: {}};
      },
      componentWillMount: function() {
        this.loadNotificationsFromServer();
        setInterval(this.loadNotificationsFromServer, this.props.pollInterval);
      },
      render: function() {
        return (
          &lt;div&gt;
            &lt;li className="dropdown-menu-title"&gt;
                &lt;span&gt;You have {this.state.data.notificationCount} notifications&lt;/span&gt;            
            &lt;/li&gt;
            &lt;Notifications data={this.state.data.notificationType} /&gt;
          &lt;/div&gt;  
        );
      }
    });
  
  
  
    var Notifications = React.createClass({
      render: function() {
        var notificationNodes = this.props.data.map(function (notif, index) {
          return &lt;Notification key={index}&gt;{notif.type}&lt;/Notification&gt;;
        });
        return &lt;li&gt;{notificationNodes}&lt;/li&gt;;
        }
    });
  
    var Notification = React.createClass({
      render: function() {
        return (
          &lt;a href="#"&gt;
                &lt;span className="icon blue"&gt;&lt;i className={this.props.children == "user" ? 'icon-user' : 'icon-comment-alt'}&gt;&lt;/i&gt;&lt;/span&gt;
                &lt;span className="message"&gt;{this.props.children}&lt;/span&gt;           
                &lt;span className="time"&gt;1 min&lt;/span&gt;
            &lt;/a&gt;
        );
      }
    });
  
    React.renderComponent(
      &lt;NotificationStatus url="/data/notifications.json" pollInterval={2000} /&gt;,
      document.getElementById('notificationbar')
    );
  </code></pre>
  
  <p>And this is a sample from the JSON:</p>
  
  <pre><code>    {
      "notificationCount": "1",
      "notificationType": [
         {
           "type": "update",
           "text": "New Update"
         },
         {
            "type": "user",
            "text": "New User"
         }
       ]
      }
  </code></pre>
  
  <p>When I try to get notificationType, an error "this.props.data is undefined" is raised at this point</p>
  
  <pre><code>    var notificationNodes = this.props.data.map(function (notif, index) {
  </code></pre>
  
  <p>I really don't see what's wrong with the declaration, and when I get the JSON at the ajax level, I do have a map (verified with the console.log).</p>
  
  <p>Any help would be great.</p>
  
  <p>Thanks a lot.</p>