App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// Build a React.js JSONPlaceholder API to Render Posts With Pagination Controls Using jw-react-pagination import React from 'react'; import JwPagination from 'jw-react-pagination'; class App extends React.Component { constructor() { super(); // bind the onChangePage method to this React component this.onChangePage = this.onChangePage.bind(this); // store example items and current page of items in local state this.state = { items: [], pageOfItems: [] }; } componentDidMount() { // Fetch items from JSONPlaceholder API fetch('https://jsonplaceholder.typicode.com/posts') .then(response => response.json()) .then(data => { this.setState({ items: data }); }) .catch(error => console.error('Error fetching data:', error)); } onChangePage(pageOfItems) { // update local state with new page of items this.setState({ pageOfItems }); } render() { return ( <div> <h1>React - Pagination Example with JSONPlaceholder API</h1> {this.state.pageOfItems.map(item => ( <div key={item.id}> <h3>{item.title}</h3> <p>{item.body}</p> </div> ))} <JwPagination items={this.state.items} onChangePage={this.onChangePage} pageSize={5} // Show 5 items per page /> </div> ); } } export default App; |
