infinite scroll in React + Meteor

Question

I'm using Meteor with React. I cannot implement infinite scrolling. I have tried different npm and Meteor packages and it's still not working. "createContainer" subscribes to the whole dataset of "links", which is then rendered in the app. How can subscribe to just 9 entries and load more whenever a user is at the end of the page? I have spent the whole day on it, please help me!

class DealsList extends Component {


    renderList() {
        return this.props.links.map(link => {
        const url = `/travels/${link._id}`;

        return (
            <div className="col-md-4" key={link._id}>
            <Link  to={url} id={link._id}>
                <div className="thumbnail">

                <div className="imageProp">
                    <div className="caption readMore">SHOW DEAL <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></div>
                    <img src={link.image} alt="Just another travel deal" />
                </div>

                <div className="caption">
                    <h4>{link.title}</h4>
                    {/*<p className="card-description"><strong>Bootstrap Thumbnail</strong> Customization Example. Here are customized <strong>bootstrap cards</strong>. We just apply some box shadow and remove border radius.</p>
                    <p><a href="#" className="btn btn-primary" role="button">Button</a></p>*/}
                </div>

                </div>
            </Link>
            </div>

        );
        });
    }


    render() {

        return (
          <div> 
          <FirstCarousel />
          <div className="container-fluid containerPadding cards-row">
              <div className="row">

              <div className="col-lg-12">
                  <div className="row grid">
                      {this.renderList()}
                  </div>
              </div>

              </div>

          </div>
          </div>
        );
    }
}



export default createContainer(() => {

Meteor.subscribe('links');

return { links: Links.find({}).fetch() };
}, DealsList);

Answer 1

There's a good chapter about pagination and infinite scroll in the Meteor Guide , you should check it out. In essence, what you need to do, is give your lists publication a parameter to specify the number of items that will be fetched, like so:

Meteor.publish('links', (limit) => {
  const options = {
    sort: {time: -1}, // Or some other relevant sorting
    limit
  };
  return Links.find({}, options);
};

Now your the parent component that contains your DealsList , you need to do two things: 1. Hold a state variable for the limit , with some appropriate initial value, that is passed down to your DealsList . 2. Increase this limit by some amount when the user reaches the bottom of the page. You can find multiple guides on how to do that if you search, for example you can look at this .

Once those are done, you can simply use the limit parameter in the subscription like this:

export default createContainer((props) => {
  Meteor.subscribe('links', props.limit);
  return { links: Links.find({}).fetch() };
}, DealsList);