Pagination with React.js

Question

Right now I'm stuck with pagination implementation with React. I have all the neccessary data from JSON, however I got no result. Here's the code I use: first, I fetch data from the server:

constructor() {
    super();
    this.state = {items: {}, totalPages: [], nextPage: []};
}
componentDidMount() {
    let url = 'http://localhost:8000/items?json=true';
    request.get(url).then((response) => {
        this.setState({
            items: response.body.items.data,
            totalPages: response.body.items.last_page,
            nextPage: response.body.items.next_page_url
        });
    });
}

Thus I get a simple JSON file:

{
  "items": {
    "total": 26025,
    "per_page": 16,
    "current_page": 1,
    "last_page": 1627,
    "next_page_url": "http://localhost:8000/items?page=2",
    "prev_page_url": null,
    "from": 1,
    "to": 16,
    "data": [
      {
        "id": 1,
        ...
      },
      {
        "id": 2,
        ...
      },
      ...
    ]
 }
}

I successfully display items data in render method like this:

let items = _.map(this.state.items, (item) => {
        return (
                <div key={item.id}>
                        <div className="content">
                            <span>
                                {item.type}
                            </span>
                            ...
                        </div>
                </div>
        )
    });

and then return it like so:

return (
        <div>
           {items}
        </div>
        <div>
           <a href={this.state.nextPage}>Next</a>
        </div>
)

I can see that URL changes after I press Next button to page2 but there are two issues: I want to change items components based on JSON file when I click Next (i.e first page contains the first set of 16 elements, second page contains the second set) but there is no change and when I click Next button again but on the second page (according to URL) it doesn't get me to the third page and so on. I know I need to somehow bind these state to page2 URL shows content described on the second page and I ran through tutorials but they seem to be outdated in case I use React 15.2.1. I would appreciate any help or a thought that'd help me to solve it!

Galeel Bhasha · Accepted Answer · 2016-07-18 00:26:13Z

1

Add a click handler to your link element and pass the url as parameter. In the handler function make the ajax request and update the states using setState (similar to the one u did it on componentDidMount).

constructor() {
    super();
    this.state = {
      items: [],
      totalPages: '',
      nextPage: ''
    };
    this._loadData = this._loadData.bind(this);
  }
  componentDidMount() {
    const url = 'http://localhost:8000/items?json=true';
    this._loadData(url);

  }
  _loadData(url) {
    request.get(url).then((response) => {
      this.setState({
        items: response.body.items.data,
        totalPages: response.body.items.last_page,
        nextPage: response.body.items.next_page_url
      });
    });
  }
  render() {
    let items = _.map(this.state.items, (item) => {
    return (
            <div key={item.id}>
                    <div className="content">
                        <span>
                            {item.type}
                        </span>
                        ...
                    </div>
            </div>
    )
});
    return (
        <div>
           {items}
        </div>
        <div>
           <a href="#0" onClick={this._loadData(this.state.nextPage)}>Next</a>
        </div>
)
  }

answered Jul 18, 2016 at 0:26

Galeel Bhasha

1,90513 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vadim Novozhilov Over a year ago

Hey Galeel, thanks for response! Unfortunately it doesn't work after I make a link to the next page giving me a console error "cannot read property 'items' of null". Seems like the link is taking me to the next page but the state of items doesn't change, request output shows that data in json document is null

Galeel Bhasha Over a year ago

what's the response you are getting when you hit localhost:8000/items?page=2 in the addressbar.? Are u getting the JSON response similar to the one you posted above.?

Vadim Novozhilov Over a year ago

First of all thanks for dedicating your time, I really appreciate it! I test response with Postman and here is what I found. In JSON document I get next_page_url as "?page=2" but as you probably saw my first requrest is made with "?json=true" parameter to load data. Navigating to "?page=2" gives me nothing but when I navigate to "?page=2?json=true" I get exactly what I want. I contacted my backend dev to make changes, but I'm just curious is it possible to add "?json=true" to nextPage when I set state?

Galeel Bhasha Over a year ago

Yes,you can do normal string concatenation using '+' operator. So in your case, at setState do something like this: response.body.items.next_page_url + '?json=true'

Collectives™ on Stack Overflow

Pagination with React.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related