How to implement pagination in React

Question

I am new to ReactJS and am creating a simple TODO application in it. Actually, it is a very basic app with no DB connection, tasks are stored in an array. I added Edit and Delete functionality to it now I want to add pagination.

How do I implement it? Any help will be appreciated. Thank you...!!

Answer 1

I've implemented pagination in pure React JS recently. Here is a working demo: http://codepen.io/PiotrBerebecki/pen/pEYPbY

You would of course have to adjust the logic and the way page numbers are displayed so that it meets your requirements.

Full code:

class TodoApp extends React.Component {   constructor() {     super();     this.state = {       todos: ['a','b','c','d','e','f','g','h','i','j','k'],       currentPage: 1,       todosPerPage: 3     };     this.handleClick = this.handleClick.bind(this);   }    handleClick(event) {     this.setState({       currentPage: Number(event.target.id)     });   }    render() {     const { todos, currentPage, todosPerPage } = this.state;      // Logic for displaying todos     const indexOfLastTodo = currentPage * todosPerPage;     const indexOfFirstTodo = indexOfLastTodo - todosPerPage;     const currentTodos = todos.slice(indexOfFirstTodo, indexOfLastTodo);      const renderTodos = currentTodos.map((todo, index) => {       return <li key={index}>{todo}</li>;     });      // Logic for displaying page numbers     const pageNumbers = [];     for (let i = 1; i <= Math.ceil(todos.length / todosPerPage); i++) {       pageNumbers.push(i);     }      const renderPageNumbers = pageNumbers.map(number => {       return (         <li           key={number}           id={number}           onClick={this.handleClick}         >           {number}         </li>       );     });      return (       <div>         <ul>           {renderTodos}         </ul>         <ul id="page-numbers">           {renderPageNumbers}         </ul>       </div>     );   } }   ReactDOM.render(   <TodoApp />,   document.getElementById('app') );