How to paginate data? - reactjs

Question

How can I implement pagination to display 10 objects on a page? Here's my sandbox:
https://codesandbox.io/s/rvo801wyp

Answer 1

There's two things to do:
You need to either bind handlePageChange in the constructor or convert it to an arrow function
Add a slice to remove from items the data that's not going to be shown .slice(this.state.activePage * this.state.itemsCountPerPage,(this.state.activePage + 1) * this.state.itemsCountPerPage)
Take a look to my changes in the code:
https://codesandbox.io/s/k58z3r9115
I've also added dynamically itemsCountPerPage to the state

Answer 2

There are two ways to achieve this objective,
Pagination using API
make API to handle some request param like
{
**per_page_limit**: <no of record on a single page>,
**current_page**: <current page number>,
....other request param
}
Pagination on client end
fetch all the records and create a pagination, for this get length of list and on bases of your requirement create pages,
for eg. total record: 100
per page limit: 10, so total pages will be 10
now to show only data for page, use setState, and for data use
list_data_to_display = list.slice(0, page*limit)
this.setState({slow_list: list_data_to_display})
handlePageChange=(pageNumber)=> {}
Solution will be:
this.state = {
items: [],
isLoading: false,
activePage: 1,
itemsCountPerPage: 1,
totalItemsCount: 1,
**show_list**: []
};
show_list_data = () => {
const show_list_data = this.state.items.slice(0, 10);
this.setState({
show_list: show_list_data
});
};
componentDidMount() {
fetch("https://demo9197058.mockable.io/users")
.then(res => res.json())
.then(json => {
this.setState(
{
items: json,
isLoading: true
},
this.show_list_data
);
});
}
handlePageChange = pageNumber => {
console.log(`active page is ${pageNumber}`);
const show_list_data = this.state.items.slice(
(pageNumber - 1) * 10,
pageNumber * 10
);
this.setState({
show_list: show_list_data,
activePage: pageNumber
});
};
render() {
var { show_list, isLoading } = this.state;
if (!isLoading) {
return <div> loadding....</div>;
} else {
return (
<div>
<ul>
{show_list.map(item => (
....
....