title: React State change is not Rendering
body: <p>I'm fairly new to React and I'm having an issue where my initial state is rendering, but when the state is changed via AJAX call (successful) is not causing the function to render again. So what happens is the 'getInitialState' sets a static list of categories and 'componentDidMount' gets a new list from my API. The call executes correctly and triggers a success, so I don't know why the dropdown isn't updating.</p>
  
  <pre><code>  var Dropdown = React.createClass({
      getInitialState: function() {
        return {
          listVisible: false,
          display: ""
        };
      },
  
      select: function(item) {
        this.props.selected = item;
      },
  
      show: function() {
        this.setState({ listVisible: true });
        document.addEventListener("click", this.hide);
      },
  
      hide: function() {
        this.setState({ listVisible: false });
        document.removeEventListener("click", this.hide);
      },
  
      render: function() {
        return &lt;div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}&gt;
          &lt;div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}&gt;
            &lt;span&gt;{this.props.selected.name}&lt;/span&gt;
            &lt;i className="fa fa-angle-down"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div className="dropdown-list"&gt;
            &lt;div&gt;
              {this.renderListItems()}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;;
      },
  
      renderListItems: function() {
        var categories = [];
        for (var i = 0; i &lt; this.props.list.length; i++) {
          var category = this.props.list[i];
          categories.push(&lt;div onClick={this.select.bind(null, category)}&gt;
            &lt;span&gt;{category.name}&lt;/span&gt;
            &lt;i className="fa fa-check"&gt;&lt;/i&gt;
          &lt;/div&gt;);
        }
        return categories;
      }
    });
  
  var GridFilter = React.createClass({
  getInitialState: function() {
    return {categoryList: [{
      name: "Cat1",
      value: "#F21B1B"
    }, {
      name: "Cat2",
      value: "#1B66F2"
    }, {
      name: "Cat3",
      value: "#07BA16"
    }] };
  },
  getCategories: function() {
  
    var nextPage = 1; //increase the page count
    ajax_url = "http://127.0.0.1:8200/api/categories/";
    ajax_type = "GET";
    ajax_data = {};
  
    $.ajax({
       url: ajax_url,
       type: ajax_type,
       contentType: 'application/x-www-form-urlencoded',
       data: ajax_data,
       dataType: 'json',
  
    success: function(data) {
      this.setState({
        data: this.state.categoryList,
      });
      //loading("off");
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  
    });
  
   }, //end function
  componentDidMount: function() {
    this.getCategories();
  },
  render: function() {
    return (
      &lt;div id="filter-bar" className="stamp"&gt;
        &lt;Dropdown list={this.state.categoryList} selected={this.state.categoryList[0]} /&gt;
        &lt;p className="filter-select"&gt;Categories &lt;i className="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/p&gt;
        &lt;p className="filter-select"&gt;Type &lt;i className="fa fa-angle-down"&gt;&lt;/i&gt;&lt;/p&gt;
        &lt;p className="filter-text"&gt;Filters:&lt;/p&gt;
  
      &lt;/div&gt;
    );
  }
  });
  </code></pre>