Set selected page

[FatihDumlupinar]

How can we ensure that the page we want opens without the user pressing the page change button?

[MonsieurV]

Please use the forcePage prop

[FatihDumlupinar]

I don't understand how to use forcePage so let me show you my direct question.

I have a design that you see above, when the input on the side changes, the number of data on the page changes.

When the data in the input reaches the maximum size, only one page remains. But if a different page is already selected, it stays on the selected page when it goes down to page 1.

What I want to do is go to the first page when the value in each input changes or open that page directly when the last 1 page remains.

[MonsieurV]

Yes, you have to manage yourself a currentPage state and pass it as forcePage.

It is your responsability to know that your current page is greater than the last page and decide what to do. For eg. use an useEffect hook to detect your last case and change your current page.

Which props do you use currently to set current page / handle page changes?

[FatihDumlupinar]

const Pagination = ({ handlePageClick, pageCount, setItemsPerPage, width, infoCount = 0 }) => {

    const [pageNumber, setPageNumber] = useState(10);
    const [page, setPage] = useState(1)
    const [forcePage, setForcePage]=useState(0);

    useEffect(() => {
        setForcePage(0)
    }, [pageNumber])

    const pageUp = () => {
        if (pageCount !== 1) {
            setItemsPerPage(number => number + 1);
            setPageNumber(number => number + 1)
        }
    }
    const pageDown = () => {
        if (pageNumber > 1) {
            setItemsPerPage(number => number - 1);
            setPageNumber(number => number - 1)
        }
    }

    const handlePageChange = (event) => {
        setPage(event.selected + 1);
        handlePageClick(event)
    }

    return (

        <div className={styles.searcharea}>
            <span className={styles.searchinfo}>
                {infoCount} {page}-{pageCount}
            </span>
            <div style={{ width }} className={styles.paginationsection}>
                <ReactPaginate
                    pageRangeDisplayed={1}
                    forcePage={forcePage}
                    pageCount={pageCount}
                    nextLabel={<RightIcon size='15' />}
                    previousLabel={<LeftIcon size='15' />}
                    onPageChange={handlePageChange}
                    breakLabel="..."
                    pageClassName={styles.btncount}
                    pageLinkClassName={styles.btncount}
                    previousClassName={styles.btnmove}
                    previousLinkClassName={styles.btnmove}
                    nextClassName={styles.btnmove}
                    nextLinkClassName={styles.btnmove}
                    breakClassName={styles.btndecoration}
                    breakLinkClassName={styles.btndecoration}
                    containerClassName={styles.pagination}
                    activeClassName={styles.countselected}
                />

                <div className={styles.selectgroup}>
                    <div className={styles.inputgroup}>
                        <input disabled className={styles.input} minLength={1} value={pageNumber} type="text" />
                    </div>
                    <div className={styles.counterbtngroup}>
                        <button onClick={pageUp} className={styles.upbtn}>
                            <UpIcon size='12' />
                        </button>
                        <button onClick={pageDown} className={styles.downbtn}>
                            <DownIcon size='12' />
                        </button>
                    </div>
                </div>
            </div>
        </div>
    )
};

export default Pagination;

Page does not change even though forcePage changes.

[MonsieurV]

If you use the v9 version and replace the forcePage prop by the page does it work?

npm install github:AdeleD/react-paginate#v9

                <ReactPaginate
                    pageRangeDisplayed={1}
                    page={forcePage}
                    pageCount={pageCount}
                    ...
                />

[adamajinugroho]

in const handlePageChange = (event) => { setPage(event.selected + 1); handlePageClick(event); }

have you tried to set the setForcePage(event.selected)? there is a comparation in pagination component that the component will check forcePage with the previousForcePage,

so let say that you set setForcePage(0), then you click the page button 2, even though the active button changed but the pagination component state forcePage remain 0, so whenever you call setForcePage(0) it wont go back to button 0, it will stay at button 2

const handlePageChange = (event) => { setPage(event.selected + 1); setForcePage(event.selected); handlePageClick(event); }

[xJuan21]

Did you guys get this fixed?