title: React JS - stop infinite scroll at the end of array
body: <p>I have this simple react app,  where I fetch the Flickr public feed. So, I can scroll to the end of the page and new content is going to show. So I would like to scroll until there is nothing else new, and the app stops trying to load more content, because it has reached the last item of the list, which is not happening if I try to scroll (you can see that on the loading message). How can I fix this? </p>
  
  <p>Check the code below:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  import $ from "jquery";
  
  import PhotoListItem from "./photoListItem";
  
  import "./photoApp.css";
  
  export default class PhotoApp extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        photoList: [],
        searchTerm: "cyanotype",
        items: 8,
        loadingState: false,
        loadingMessage: ""
      };
    }
  
    componentDidMount() {
      this.getPhotoList();
      this.onInfiniteScroll();
    }
  
    /* get data from Flickr public feed */
    getPhotoList = () =&gt; {
      const flickrApiPoint =
        "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&amp;tags=" +
        this.state.searchTerm;
  
      try {
        $.ajax({
          url: flickrApiPoint,
          dataType: "jsonp",
          data: { format: "json" },
          success: function(data) {
            this.setState({ photoList: data.items });
          }.bind(this)
        });
      } catch (err) {
        console.log(err);
      }
    };
  
    /* code for infinite scroll */
    onInfiniteScroll = () =&gt; {
      this.refs.iScroll.addEventListener("scroll", () =&gt; {
        if (
          this.refs.iScroll.scrollTop + this.refs.iScroll.clientHeight &gt;=
          this.refs.iScroll.scrollHeight - 20
        ) {
          this.loadMoreItems();
        }
      });
    };
  
    /* code for infinite scroll */
    loadMoreItems = () =&gt; {
      if (this.state.loadingState) {
        return;
      }
  
      this.setState({
        loadingState: true,
        loadingMessage: "Loading photos..."
      });
      setTimeout(() =&gt; {
        this.setState(prevState =&gt; ({
          items: prevState.items + 8,
          loadingState: false,
          loadingMessage: "No more photos to show."
        }));
      }, 1000);
    };
  
    render() {
      console.log(this.state.photoList)
      return (
        &lt;div className="appContainer" ref="iScroll"&gt;
          &lt;div className="appHeader"&gt;
            &lt;h1 className="headerTitle"&gt;
              Welcome to Flickr Alternative Photography Feed!
            &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div className="gridContainer"&gt;
            {this.state.photoList
              .slice(0, this.state.items)
              .map((photo, index) =&gt; {
                const author = photo.author.split(/"/)[1];
                const authorLink = photo.description.split(/"/)[1];
                const description = photo.description.split(/"/)[13];
                return (
                  &lt;PhotoListItem
                    key={index}
                    url={photo.media.m}
                    photoLink={photo.link}
                    title={photo.title}
                    author={author}
                    authorLink={authorLink}
                    description={description}
                    tags={photo.tags}
                  /&gt;
                );
              })}
          &lt;/div&gt;
  
          &lt;React.Fragment&gt;
            {this.state.loadingState ? (
              &lt;p className="loading"&gt;{this.state.loadingMessage}&lt;/p&gt;
            ) : (
              &lt;p className="loading"&gt;{this.state.loadingMessage}&lt;/p&gt;
            )}
          &lt;/React.Fragment&gt;
        &lt;/div&gt;
      );
    }
  }
  
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/recursing-glitter-j0d2y" rel="nofollow noreferrer">LIVE EXAMPLE HERE</a></p>
  
  <p>Thank you! </p>