React + Hooksで作るページネーションコンポーネント

export const ParentComponent: React.FC<Props> = props => {
  const handlePaginate = (page: number) => {
    // APIを叩きに行く処理
  };

  return (
    <div>
      {/* 親コンポーネントのrender内容 */}

      {/* ページ番号がクリックされるとhandlePaginateが実行される */}
      <Pagination
        sum={100}
        per={10}
        onChange={e => handlePaginate(e.page)}
      />
    </div>
  )
}

import * as React from "react";

interface Props {
  sum: number;
  per: number;
  onChange: (e: { page: number }) => void;
}

export const Pagination: React.FC<Props> = props => {
  // 初回レンダリングかどうかを判定するための変数
  const isFirstRender = React.useRef(true);
  // 現在のページ番号
  const [currentPage, setPage] = React.useState(1);

  React.useEffect(() => {
    // 初回レンダリング時はスキップし、変数を更新する
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }

    // 親コンポーネントにpage番号を渡す
    props.onChange({ page: currentPage });
  }, [currentPage]);

  // ページ数
  const totalPage: number = Math.ceil(props.sum / props.per);

  // 「<」がクリックされたときの処理
  const handleBack = (): void => {
    if (currentPage === 1) {
      return;
    }

    setPage(currentPage - 1);
  };

  // 「>」がクリックされたときの処理
  const handleForward = (): void => {
    if (currentPage === totalPage) {
      return;
    }

    setPage(currentPage + 1);
  };

  // ページ番号を直接クリックされたときの処理
  const handleMove = (page: number): void => {
    setPage(page);
  };

  return (
    <div>
      {/* ページ番号が0（= アイテムが0個）のときは何も描画しない */}
      {totalPage !== 0 && (
        <>
          <span onClick={() => handleBack()}>＜</span>
          <ul>
            {[...Array(totalPage).keys()].map(page => {
              page++;
              return page === currentPage ? (
                <li key={page} onClick={() => handleMove(page)}>
                  {page} active
                </li>
              ) : (
                <li key={page} onClick={() => handleMove(page)}>
                  {page}
                </li>
              );
            })}
          </ul>
          <span onClick={() => handleForward()}>＞</span>
        </>
      )}
    </div>
  );
};