Adding next and prev buttons using react.js

user_11625898 0
Viewed 3543

I succeded to paginate my posts but couldn't add next and prev buttons and make them dynamically using this code snippet:

import React from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={ ()=> paginate(number)} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
            </ul>
        </nav>
    )
}
export default Pagination

please help to find way to include these buttons next and prev dynamically to my pagination who appears down. It's working great but needs next and prev

enter image description here

reactjs pagination
2 Answers

Let's give your component some state so it can know the current page and, therefore, can know how to go to the next page. This should get you pretty close!

import React, { useState } from 'react'

const Pagination = ({postsPerPage, totalPosts, paginate}) => {
    const [currentPage, setCurrentPage] = useState(0)

    console.log(totalPosts)
    const PageNumbers = []

    const int = Math.ceil(totalPosts / postsPerPage)
    if (int === 1 ) return null 
    for (let i = 1; i<= int; i++) {
        PageNumbers.push(i) 
    }
    return (
        <nav aria-label="Page navigation example">
            <ul className="pagination">
                {PageNumbers.includes(currentPage - 1) && <a onClick={() => {
                    setCurrentPage(currentPage - 1);
                    paginate(currentPage - 1);
                }}>}
                    Prev
                </a>
                {PageNumbers.map(number=> (
                    <li key={number} className="page-item">
                        <a onClick={()=> {
                            setCurrentPage(number)
                            paginate(number)
                        }} href="!#" className="page-link">
                            {number} 
                        </a>
                    </li>
                ))}
                {PageNumbers.includes(currentPage + 1) && <a onClick={() => {
                    setCurrentPage(currentPage + 1);
                    paginate(currentPage + 1);
                }}>}
            </ul>
        </nav>
    )
}
export default Pagination
user_65257240 
const [currentPage, setCurrentPage] = useState(1);

const getPrevious  = () => {
        setCurrentPage(currentPage - 1)
    }
    const getNext  = () => {
        setCurrentPage(currentPage + 1)
    }

and need to use these functions on previous and next buttons. This worked for me fortunately

user_37039060
Related