title: React State Change Not Causing component to Re-Render
body: <p>I'm still new to ReactJS, and I've run into a bit of a snag. I'm trying to implement pagination in a React component; however, even though my pagination function is being called successfully the state change is not causing the component to Render again.</p>
  
  <p>I'm using one function to get the initial data (getMainFeed) and then a second one (getMoreItems) for the pagination. The second function is called by my 'handleScroll' function. Interestingly enough, when I replace the 'getMoreItems' function with the 'getMainFeed' function, the state change causes the component to render the additional data perfectly. Unfortunately I need to hit these two separate APIs and I don't think it would be in good form to combine the two calls into one function. So is there a way that I can get 'getMoreItems' to render the new items to the screen?</p>
  
  <pre><code>var data = [];
  
  
  var GridView = React.createClass({
    getInitialState: function() {
      window.addEventListener("scroll", this.handleScroll);
      return {
        data: [],
        page: 0,      //for pagination
        loadingFlag: false,
      };
      },
  
    getMainFeed: function() {
  
      var nextPage = 1; //increase the page count
      ajax_url = "http://127.0.0.1:8200/api/content/main/";
      ajax_type = "GET";
      ajax_data = {
         'BatchCount': "20"
      };
  
      $.ajax({
         url: ajax_url,
         type: ajax_type,
         contentType: 'application/x-www-form-urlencoded',
         data: ajax_data,
  
         dataType: 'json',
  
      success: function(data) {
        this.setState({
          data: data,
          loadingFlag:false,
          page: 2
  
        });
        //loading("off");
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
  
      });
  
     }, //end function
     getMoreItems: function() {
      var nextPage = this.state.page+1; //increase the page count
      ajax_url = "http://127.0.0.1:8200/api/content/page/1/";
      ajax_type = "GET";
      ajax_data = {
         'BatchCount': "20"
      };
  
      $.ajax({
         url: ajax_url,
         type: ajax_type,
         contentType: 'application/x-www-form-urlencoded',
         data: ajax_data,
  
         dataType: 'json',
  
      success: function(data) {
        this.setState({
          data: data,
          loadingFlag:false,
            page: nextPage
        });
  
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
      });
  
   }, //end function
    componentDidMount: function() {
      //loading("on");
      this.getMainFeed();
    },
    handleScroll:function(e){
      //this function will be triggered if user scrolls
      var windowHeight = $(window).height();
      var inHeight = window.innerHeight;
      var scrollT = $(window).scrollTop();
      var totalScrolled = scrollT+inHeight;
      if(totalScrolled+1200&gt;windowHeight){  //user reached at bottom
        if(!this.state.loadingFlag){  //to avoid multiple request 
            this.setState({
              loadingFlag:true,  
            });
            //loading("on");
            this.getMoreItems();
        }
      }
    },
    componentDidUpdate: function() {
  
      $('#grid-container').imagesLoaded( function() {
        MasonryInit();
      }); 
    },
    render: function() {
        return (
          &lt;div id="feed-container-inner"&gt;
            &lt;GridMain data={this.state.data} /&gt;
          &lt;/div&gt;
  
        );
      }
    });
  </code></pre>