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!

Answer 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>
)
  }