how to make an infinite scroller / "Load More" in reactjs

Question

I'm new to reactjs and I'm so confused how to make an infinite scroller or "load more" functionality.

so here is my componentDidMount:

 componentDidMount() {
  $.ajax({
  url:'http://localhost:5118/api/employeedetails/getemployeedetails/',
  success:(data)=>{

    this.setState({
      jsonReturnedValue:data , isLoading: false
    })
  }
})

}

and this where I load my table

renderItem(d, i) {
  return <tr key={i} >
    <td> {d.Employee_ID} </td>
    <td>{d.Employee_Name}</td>
    <td>{d.Address }</td> 
    <td><center><button className ="btn btn-info" onClick={this.handleOnclick.bind(this,  d.Employee_ID, d.Employee_Name, d.Address , d.Department , i)}   data-toggle="modal" data-target="#UpdateEmployee">Edit</button></center></td>
    <td><center><button className ='btn btn-danger'  onClick={this.handleOnclick2.bind (this,d.Employee_ID,d.Employee_Name,i)} data-toggle="modal" data-target="#DeleteEmployee"> Delete</button></center></td>
    </tr>
}

render() {
      if(this.state.isLoading) {
           return <span className="Loader">
                  <h1>
              <span>Loading</span>
              <span className="Loader-ellipsis" >
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
                <span className="Loader-ellipsisDot">.</span>
              </span>
            </h1>
        </span>
     }

    let {jsonReturnedValue} = this.state;
    const isEnabled = this.canBeSubmitted();


  return(
    <div>
    <div>

        <div className="container">   
          <h1> Listof Employees </h1>
            <button className ='btn btn-warning right ' data-toggle="modal" data-target="#AddEmployee"> Add an Employee</button>
             <table className= "table table-bordered" id="result"> 
                <tbody>
                 <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Address</th>
                      <th>Update</th>
                      <th>Delete</th>
                 </tr>
                   {/*  {this.state.tableLoading? <LoadingComponent/>: this.renderItem()}
        */} 
                    {jsonReturnedValue.map((d,i) => this.renderItem(d,i))} 

        </tbody>

            </table>
          </div>

Adding an eventListener on scroll event is should get your job done. — Vibhanshu, May 29 '17 at 08:42
If you are looking to do that in a table, make use of pagination instead. https://react-bootstrap.github.io/components.html#pagination — Shubham Khatri, May 29 '17 at 08:50
i would love to but the infinite scroller is not my choice.. — P.Macs, May 29 '17 at 08:52

Pramod H G · Answer 1 · 2019-04-26T09:07:24.450

    componentDidMount() 
  {
    let _this = this;
    $('#notificationMainDiv').on('scroll', function() {
      if($(this).scrollTop() + $(this).innerHeight() >= $(this [0].scrollHeight) 
      {
        if(_this.state.loadMore)
        {
          _this.retrieveNotifications();
        }
      }
    })
  }

Once the bottom of the div is reached, retrieveMoreNotifications() will be called. loadMore will be set to false when no more data to retrieve.

Vibhanshu · Answer 2 · 2017-05-29T09:06:56.683

0

You first need to bind an onScroll eventListener, which you can do in componentDidMount()

componentDidMount() {
 .
 .
 window.addEventListener('scroll', this.onScroll);
}

Then you need to define an onScroll method in your component and check if user has scrolled to the bottom of page:

onScroll = () => {
  // write your code here to check if user has scrolled to the bottom of page
 if(true) { // scrollbar is at the bottom
  this.fetchMoreData();
 }
}

Then define your fetchMoreData function to update the list of jsonReturnedValue.

This is just a blueprint. You need to take care of functionalities by yourself.

To check scrolling refer to this Check if a user has scrolled to the bottom

To get more understanding of event listeners in React refer this https://stackoverflow.com/a/41406239/3323709

edited May 29 '17 at 09:06

answered May 29 '17 at 08:59

Vibhanshu

522
3
14

thanks for answering im just confused where should i put the on scroll – P.Macs May 29 '17 at 09:06
Add anywhere in your component. following React class components? – Vibhanshu May 29 '17 at 09:11
hmmm i see, but how does it says load more? – P.Macs May 29 '17 at 09:22
You need to add that pagination thing on your api side as well, which will return a specific number of records by default say 20. And it will also accept some pagenumber parameter that you can use to fetch records on specific page, and in each reponse it will tell you total page numbers and current page number, so that you come to know if there are more records or not? – Vibhanshu May 29 '17 at 09:49

how to make an infinite scroller / "Load More" in reactjs

2 Answers2