title: Reactjs:Infinite Scroll not working
body: <p>I'm trying to add infinite scroll in my web application.When the user scrolls down the page, there must be an API call to load the data beneath the existing data.So, the problem here is when I reach the bottom of the web page, the API is not being called.</p>
  
  <pre><code>import React from "react";
  import { Link } from 'react-router-dom';
  import axios from 'axios';
  
   class InfiniteData extends React.Component{
  constructor(props){
  super(props);
  this.state={olddata: [],newData: [], requestSent: false}
  }
  componentDidMount(){
    window.addEventListener('scroll', this.handleOnScroll);
    this.doQuery();
  }
  
  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleOnScroll);
  }
  
  doQuery() {
    console.log("indoquery");
    axios.get("https://jsonplaceholder.typicode.com/posts")
    .then( res=&gt;
    this.setState({
      olddata: res.data,
      newData: this.state.olddata.concat(this.state.olddata)
    })
    )
    .catch(console.log("error"))
  }
  handleOnScroll(){
    var scrollTop = (document.documentElement &amp;&amp; document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement &amp;&amp; document.documentElement.scrollHeight) || document.body.scrollHeight;
    var clientHeight = document.documentElement.clientHeight || window.innerHeight;
    var scrolledToBottom = Math.ceil(scrollTop + clientHeight) &gt;= scrollHeight;
  
    if (scrolledToBottom) {
       console.log("At bottom");
      // enumerate a slow query
       setTimeout(this.doQuery, 2000);
    }
  }
    render()
    {
      return (
      &lt;div&gt;
        &lt;div className="data-container"&gt;
          {this.state.newData &amp;&amp; this.state.newData.map((dat,i)=&gt;
            &lt;div key={i}&gt;
              {dat.body}
            &lt;/div&gt;
          )}
        &lt;/div&gt;
      &lt;/div&gt;
      );
    }
  }
  
  export default InfiniteData;
  </code></pre>