Main constructor

constructor(props) {
    super(props); 
    this.state = {
      page: 1,
      articles: [],
      loading: false,
      isActive: false,
    };
  }
  

Using componentDidMount method

    async componentDidMount() {
    const url = `https://newsapi.org/v2/top-headlines?country=us&category=${this.props.category}&apiKey=ff954e750b914328a0bc65c2e45304c4&page=1&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,
    });
  }

Trying to debug in the console "testing", but this function (loadFunc) isn't trigger inside the

    loadFunc = async () => {
    console.log('testing');
    const url = `https://newsapi.org/v2/top-headlines?country=us&category=${this.props.category}&apiKey=ff954e750b914328a0bc65c2e45304c4&page=${this.state.page + 1}&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
    })
  }
  

Rendering jsx and mapping through the elements from API

   render() {
    return (
      <div className="container my-3"> 
        {/* Infinite scrolling */}

        <InfiniteScroll
          dataLength={this.state.articles.length}
          next={this.loadFunc}
          hasMore={this.state.articles.length !== this.state.totalArticlesResults}
          loader={<Spinner />}
        >

container inside InfiniteScroll Component

          <div className="container">
            <div className="row">
              {!this.state.loading && 
                this.state.articles.map((element, index) => {

returning in mapping

                  return (
                    <div className="col-md-4" key={index}>
                     ..
                    </div>
                  );
                })}
            </div>
          </div>
        </InfiniteScroll>
      </div>
    );
  }