Pagination with React.js - json

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