React State change is not Rendering

Question

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.

  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 <div className={"dropdown-container" + (this.state.listVisible ? " show" : "")}>
        <div className={"dropdown-display" + (this.state.listVisible ? " clicked": "")} onClick={this.show}>
          <span>{this.props.selected.name}</span>
          <i className="fa fa-angle-down"></i>
        </div>
        <div className="dropdown-list">
          <div>
            {this.renderListItems()}
          </div>
        </div>
      </div>;
    },

    renderListItems: function() {
      var categories = [];
      for (var i = 0; i < this.props.list.length; i++) {
        var category = this.props.list[i];
        categories.push(<div onClick={this.select.bind(null, category)}>
          <span>{category.name}</span>
          <i className="fa fa-check"></i>
        </div>);
      }
      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 (
    <div id="filter-bar" className="stamp">
      <Dropdown list={this.state.categoryList} selected={this.state.categoryList[0]} />
      <p className="filter-select">Categories <i className="fa fa-angle-down"></i></p>
      <p className="filter-select">Type <i className="fa fa-angle-down"></i></p>
      <p className="filter-text">Filters:</p>

    </div>
  );
}
});

Answer 1

if youre trying to change the categoryList state with your incoming data you need to change your set state to

this.setState({
  categoryList: data,
});

what youre currently doing is adding a state with key data (even though there is no data key in your getInitialState function). and since youre not using this.state.data anywhere, nothing is changing, and so your ui does not appear to be updating