I'm studying react. I have a trouble with using prototype.

I want to assign a variable while chaining. The number of array returned by slice function should be assigned on count state.

What I want to implement is not to go to the page which is over the count of contents. To implement that, I thought I should assign count state when slice function is working. How can I assign count?

I typed codes in sandbox. https://codesandbox.io/s/blissful-rosalind-15e7od?file=/src/App.js Below is the same contents.

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const rows = [
    { id: 1, name: "a" },
    { id: 2, name: "b" },
    { id: 3, name: "c" },
    { id: 4, name: "d" },
    { id: 5, name: "e" },
    { id: 6, name: "f" },
    { id: 7, name: "g" },
    { id: 8, name: "h" },
    { id: 9, name: "i" },
    { id: 10, name: "j" },
    { id: 11, name: "k" },
    { id: 12, name: "l" }
  ];

  const [count, setCount] = useState(rows.length);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(3);

  const handleLeft = () => {
    page > 1 && setPage(page - 1);
  };

  const handleRight = () => {
    page < Math.ceil(count / rowsPerPage) && setPage(page   1);
  };

  return (
    <>
      <h3>
        count: {count}, page: {page}, rowsPerPage: {rowsPerPage}
      </h3>
      <button onClick={handleLeft}>left</button>
      <button onClick={handleRight}>right</button>
      {rows
        .filter((item) => item.id > 3)
        .slice(
          ...(rowsPerPage > 0
            ? [page * rowsPerPage, page * rowsPerPage   rowsPerPage]
            : [])
        )
        .map((item) => (
          <div key={item.id}>{item.id}</div>
        ))}
    </>
  );
}

Please help me. Thanks in advance.

CodePudding user response：

Why don't you try something like this sandbox link

Is there any specific reason as to why you wish to proceed with updating the prototype for your use case?

[UPDATED SANDBOX LINK]

Please find your solution on below link. There's some problem with the pagination logic but I am sure you'll take care of it. Hope the below sandbox link helps

Link

CodePudding user response：

Custom hooks implementation

const usePagination = (data = [], rowPerPage = 3) => {
  const [currentpage, setCurrentPage] = useState(0);
  const totalItems = data.length;
  const maxPages = Math.ceil(totalItems / rowPerPage);

  const next = () => {
    setCurrentPage((page) => {
      const _page = page   1;
      return _page < maxPages ? _page : page;
    });
  };
  const prev = () => {
    setCurrentPage((page) => {
      const _page = page - 1;
      return _page >= 0 ? _page : page;
    });
  };
  const itemsToList = useMemo(() => {
    const start = currentpage * rowPerPage;
    const end = start   rowPerPage;
    return data.slice(start, end);
  }, [rowPerPage, currentpage, data]);

  return {
    prev,
    next,
    itemsToList,
    maxPages,
    totalItems,
    currentpage
  };
};

code sandbox link