import React from 'react';
import ReactPaginate from 'react-paginate';
import fetch from 'node-fetch';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
page: 0,
perPage: 0,
total: 0,
pageCount: 0,
data: [],
};
}
componentDidMount() {
this.load(this.state.page);
}
load = async (page) => {
var url = 'https://reqres.in/api/users?per_page=2&page='+page;
console.log('load '+ url);
var res = await fetch(url);
res = await res.json();
// set state from ajax
this.setState({
page: res.page,
perPage: res.per_page,
total: res.total,
pageCount: res.total_pages,
data: res.data,
})
}
handlePageClick = (page) => {
console.log('clicked page ', page.selected);
this.load(page.selected);
}
render = () => (
<div className="App">
{this.state.data.map((d) => (
<p key={d.id}>{d.first_name}</p>
))}
<ReactPaginate
previousLabel={'previous'}
nextLabel={'next'}
breakLabel={'...'}
breakClassName={'break-me'}
pageCount={this.state.pageCount}
marginPagesDisplayed={2}
pageRangeDisplayed={5}
onPageChange={this.handlePageClick}
containerClassName={'pagination'}
subContainerClassName={'pages pagination'}
activeClassName={'active'}
/>
</div>
);
}
export default App;