[Solved]-Infinite scrolling with React JS-Reactjs

import react, { component } from 'react';
import infinitescroll from 'react-infinite-scroller';


const api = {
    baseurl: '/joblist'
};

class jobs extends component {
    constructor(props) {
            super(props);
            this.state = {
                listdata: [],
                hasmoreitems: true,
                nexthref: null
        };
    }

    fetchdata(){
            var self = this;           
            var url = api.baseurl;
            if(this.state.nexthref) {
                url = this.state.nexthref;
            }

            fetch(url)
            .then( (response) => {
                return response.json() })   
                    .then( (json) => {
                        var list = self.state.listdata;                        
                        json.data.map(data => {
                            list.push(data);
                        });

                        if(json.next_page_url != null) {
                            self.setstate({
                                nexthref: resp.next_page_url,
                                listdata: list                               
                            });
                        } else {
                            self.setstate({
                                hasmoreitems: false
                            });
                        }
                    })
                    .catch(error => console.log('err ' + error));

        }
    }

    componentdidmount() {
       this.fetchdata();
    }

    render() {
    const loader = <div classname="loader">loading ...</div>;
    let jobitems; 
    if(this.state.listdata){  
        jobitems = this.state.listdata.map(job => {
        return (
            <tr>
                <td>{job.job_number}</td>
                <td>{job.title}</td>
                <td>{job.description}</td>
                <td>{job.status}</td>
            </tr>
        );
      });
    }
    return (
      <div classname="jobs">
        <div classname="container">
            <h2>jobs list</h2>

            <infinitescroll
                pagestart={0}
                loadmore={this.fetchdata.bind(this)}
                hasmore={this.state.hasmoreitems}
                loader={loader}>
                <table classname="table table-bordered">
                <thead>
                    <tr>
                        <th>job number</th>
                        <th>title</th>
                        <th>description</th>
                        <th>status</th>
                    </tr>
                </thead>
                <tbody>
                {jobitems}
                </tbody>
                </table>
            </infinitescroll>
        </div>
    </div>
    );
  }

}

export default jobs;

check out our react infinite library:

https://github.com/seatgeek/react-infinite

update december 2016

i've actually been using react-virtualized in a lot of my projects recently and find that it covers the majority of use cases a lot better. both libraries are good, it depends on exactly what you're looking for. for instance, react-virtualized supports variable height jit measuring via an hoc called cellmeasurer, example here https://bvaughn.github.io/react-virtualized/#/components/cellmeasurer.

update november 2018

a lot of the lessons from react-virtualized have been ported to the smaller, faster, more efficient react-window library from the same author.