Changing the state of a reaction is not a rendering

Question

I am new to React, and I had a problem when my initial state is being rendered, but when the state is changed using an AJAX call (successfully), this does not cause the function to be re-rendered. So what happens, "getInitialState" sets up a static list of categories, and "componentDidMount" gets a new list from my API. The call is executed correctly and starts a successful process, so I do not know why the dropdown menu is not updated.

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 you are trying to change the status of a categoryList with your input, you need to change the set state to

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

what you are doing now is adding state with key data (although there is no data key in your getInitialState function). and since you are not using this.state.data anywhere, nothing changes, and therefore your ui is not updated