Error in ajax (cannot read property undefined) while doing infinite scroll react

Question

Error in ajax (cannot read property undefined) while doing infinite scroll react

I am trying to implement infinite scrolling in react js by iterating over the same dataset a certain number of times and adding an event listener to the window.

The code I have is as follows

import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
import {Author} from './Author.js'


class ExpenseApp extends React.Component{
  constructor(props){
    super(props);
    this.state={
      data:this.props.data,
      list:[],
      repeat:[],
      requestSent:false
    }
    this.handleOnScroll=this.handleOnScroll.bind(this);
  }
  componentDidMount(){
    window.addEventListener('scroll',this.handleOnScroll);
    this.initFakeData();
  }
  componentWillUnmount(){
    window.removeEventListener('scroll',this.handleOnScroll);
  }

  initFakeData(){
    var data=this.createData(this.state.data,100);
    this.setState({data:data});
  }

  createData(data,counter){
    var i=0;

    var fakeData=[];
    var len=Object.keys(data).length;
    for(i=0;i<counter;i++){
      for(var j=0;j<len;j++){

        fakeData.push(data[j]);
      }
    }
    return fakeData;
  }

  querySearchResult(){
    if(this.state.requestSent){
      return;
    }
    setTimeout(this.doQuery,2000);
    this.setState({
      requestSent:true
    })
  }

  doQuery(){
    var that=this;
    $.ajax({

      url:'#',
      data:null,
      method:'GET',
      success:function(data,textStatus,jqXHR){
        var fakeData=that.createData(that.state.data,20);
        var newData=that.state.data.concat(fakeData);
        that.setState({data:newData,requestSent:false});
      },
      error: function(jqXHR, textStatus, errorThrown) {
        that.setState({requestSent: false});
      }
    });

  }

  handleOnScroll() {
    var that=this;
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight || window.innerHeight;
    var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
    if (scrolledToBottom) {
      that.querySearchResult();
    }
  }

  render(){
    var data=this.state.data;
    var list=this.state.list;
     var len= Object.keys(data).length;
     console.log(data);
    for(var i=0;i<len;i++){
      list.push(<Author key={i} i={i} data={data[i]}/>);
    }

    return(
    <div>
      <div className="row">
        {list}
      </div>
      {(() => {
        <span>still loading</span>
          if (this.state.requestSent) {
            return(
              <div className="data-loading">
                <i className="fa fa-refresh fa-spin"></i>
              </div>
            );
          } else {
            return(
              <div className="data-loading"></div>
            );
          }
        })()}
        </div>
      )
  }
}