title: Why is my React Infinite Scrolling not working?
body: <p>Main constructor</p>
  <pre><code>constructor(props) {
      super(props); 
      this.state = {
        page: 1,
        articles: [],
        loading: false,
        isActive: false,
      };
    }
    
  </code></pre>
  <p>Using componentDidMount method</p>
  <pre><code>    async componentDidMount() {
      const url = `https://newsapi.org/v2/top-headlines?country=us&amp;category=${this.props.category}&amp;apiKey=ff954e750b914328a0bc65c2e45304c4&amp;page=1&amp;pageSize=${this.props.pageSize}`;
      this.setState({ loading: true });
      let data = await fetch(url);
      let parsedData = await data.json(data);
  
      this.setState({
        articles: parsedData.articles,
        totalArticlesResults: parsedData.totalResults,
        loading: false,
      });
    }
  </code></pre>
  <p>Trying to debug in the console &quot;testing&quot;, but this function (loadFunc) isn't trigger inside the </p>
  <pre><code>    loadFunc = async () =&gt; {
      console.log('testing');
      const url = `https://newsapi.org/v2/top-headlines?country=us&amp;category=${this.props.category}&amp;apiKey=ff954e750b914328a0bc65c2e45304c4&amp;page=${this.state.page + 1}&amp;pageSize=${this.props.pageSize}`;
      this.setState({ loading: true });
      let data = await fetch(url);
      let parsedData = await data.json(data);
      this.setState({
        articles: [...this.state.articles, ...this.parsedData.articles],
        totalArticlesResults: parsedData.totalResults,
        loading: false
      })
    }
    
  </code></pre>
  <p>Rendering jsx and mapping through the elements from API</p>
  <pre><code>   render() {
      return (
        &lt;div className=&quot;container my-3&quot;&gt; 
          {/* Infinite scrolling */}
  
          &lt;InfiniteScroll
            dataLength={this.state.articles.length}
            next={this.loadFunc}
            hasMore={this.state.articles.length !== this.state.totalArticlesResults}
            loader={&lt;Spinner /&gt;}
          &gt;
  </code></pre>
  <p>container inside <code>InfiniteScroll</code> Component</p>
  <pre><code>          &lt;div className=&quot;container&quot;&gt;
              &lt;div className=&quot;row&quot;&gt;
                {!this.state.loading &amp;&amp; 
                  this.state.articles.map((element, index) =&gt; {
  </code></pre>
  <p>returning in mapping</p>
  <pre><code>                  return (
                      &lt;div className=&quot;col-md-4&quot; key={index}&gt;
                       ..
                      &lt;/div&gt;
                    );
                  })}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/InfiniteScroll&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>