Library-next-prev.js

handleNextPhoto() {
  const { photoIndex } = this.state; // the only state the Library manages is the current index
  const { photos, canLoadMore } = this.props; // we get the array of photos from the <App />
  if(photoIndex  + 5 > photos.length && canLoadMore) {
    // if we're 5 off of the last photo we tell the <App /> to load 50 more if there are any more to load
    this.props.loadMore();
  }
  if(photos[photoIndex+1]) {
    // if there is a photo Object at the next index, go there
    this.setState({ photoIndex: photoIndex+1 });
  } else {
    // else we're at the end, so go to the first photo
    this.setState({ photoIndex: 0 });
  }
}
// this is the same as for next, but in reverse
prevPhoto() {
  const { photoIndex } = this.state;
  const { photos } = this.props;
  if(photos[photoIndex-1]) {
    this.setState({ photoIndex: photoIndex-1 });
  } else {
    this.setState({ photoIndex: photos.length });
  }
}