I'm new to ReactJS and one thing that I'm working on is Pagination. ReactJS is a great tool to make plex UI views but sometimes the simplest thing is the hardest. I could do it in jQuery but I want to do it using React.

Basically, I would like to have a "Load More" style of pagination where items are appended to the body (like a news feed). In my code, I do an ajax request to get the data, put it in a state variable, and then render the DOM. I have successfully done this with only 1 page of data because I created a new variable for items.

onCallSuccessGetListings: function(data) {
    this.setState({ hasSuccess: data.success });

    if(data.success !== false) {
        this.setState({ 
            hasSuccess: JSON.parse(data).success,
            newListings: false
        });

        if(this.props.hasClickedPagination) {
            this.setState({
                newListings: JSON.parse(data).result
            });
        } else {
            this.setState({
                listings: JSON.parse(data).result
            });
        }
    }
},

Basically, I know when the person clicked on "Load More" and then I use a new variable to store the data. Here's the render function:

render: function() {
    var markup = [],
        nextMarkup = [];

    if(this.state.hasSuccess) {
        markup = Object.keys(this.state.listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)

        if(this.state.newListings !== false) {
            nextMarkup = Object.keys(this.state.newListings).map(function(value){
                return (
                    <div className="property__item" key={value}>
                        blablabla
                    </div>
                )
            }, this)
        }
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
            { nextMarkup }
        </div>
    );
}

As you can see, I'm duplicating the code and I couldn't find a way to do it the "React" style. I don't want to create 10 variables when the user clicks on "Load More" 10 more times.

If anyone could help, that would be great. I can't think of a solution and it has been haunting me for days.

Many thanks.

I'm new to ReactJS and one thing that I'm working on is Pagination. ReactJS is a great tool to make plex UI views but sometimes the simplest thing is the hardest. I could do it in jQuery but I want to do it using React.

Basically, I would like to have a "Load More" style of pagination where items are appended to the body (like a news feed). In my code, I do an ajax request to get the data, put it in a state variable, and then render the DOM. I have successfully done this with only 1 page of data because I created a new variable for items.

onCallSuccessGetListings: function(data) {
    this.setState({ hasSuccess: data.success });

    if(data.success !== false) {
        this.setState({ 
            hasSuccess: JSON.parse(data).success,
            newListings: false
        });

        if(this.props.hasClickedPagination) {
            this.setState({
                newListings: JSON.parse(data).result
            });
        } else {
            this.setState({
                listings: JSON.parse(data).result
            });
        }
    }
},

Basically, I know when the person clicked on "Load More" and then I use a new variable to store the data. Here's the render function:

render: function() {
    var markup = [],
        nextMarkup = [];

    if(this.state.hasSuccess) {
        markup = Object.keys(this.state.listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)

        if(this.state.newListings !== false) {
            nextMarkup = Object.keys(this.state.newListings).map(function(value){
                return (
                    <div className="property__item" key={value}>
                        blablabla
                    </div>
                )
            }, this)
        }
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
            { nextMarkup }
        </div>
    );
}

As you can see, I'm duplicating the code and I couldn't find a way to do it the "React" style. I don't want to create 10 variables when the user clicks on "Load More" 10 more times.

If anyone could help, that would be great. I can't think of a solution and it has been haunting me for days.

Many thanks.

• javascript
• ajax
• reactjs
• pagination

2 Answers 2

This tutorial might help everyone to implement a paginated list in React. It has the list itself and a More button to fetch the next subset of a paginated list from a backend. The backend in tutorial is already provided. I hope it helps anyone who wants to implement such a functionality.

There is no need to create a new state variable per "page of results". It looks to me that you are doing an infinite scroll result set and that the onCallSuccessGetListings lives within your Component.

Instead of creating a new variable for a new page of results, append any new results to the existing variable. e.g.

onCallSuccessGetListings: function(data) {
    var jsonData = JSON.parse(data);

    this.setState({ 
      hasSuccess: jsonData.success,
      listings: jsonData.success 
         ? this.state.listings.concat(jsonData.result)
         : this.state.listings
    });
},

Make sure you set your initial state to be { listings = [] } (https://facebook.github.io/react/docs/ponent-specs.html#getinitialstate).

The above code will trigger an update on your ponent every time the state is set, then you can simply loop over the results. I would also consider updating the way you use the state.hasSuccess flag. I think it should rather be used to indicate if an error occurred. Here is a revised render() method:

render: function() {
    var markup = [];
        hasSuccess = this.state.hasSuccess,
        listings = this.state.listings;

    if(!hasSuccess) {
        markup.push(<div>An error occurred.</div>);
    } else if (listings.length > 0) {
        markup = Object.keys(listings).map(function(value){
            return (
                <div className="property__item" key={value}>
                    blablabla
                </div>
            )
        }, this)
    } else {
        markup.push(<p key="1">No results</p>)
    }

    return (
        <div className="property__list--grid">
            { markup }
        </div>
    );
}