Reactでページングを実装

Reactでページングを実装

Reactでページングを実装するために、データをページごとに分割し、それを表示するコンポーネントを作成します。
ライブラリをインストールする必要はありません。
以下にTypeScriptを使用した例を示します。

ページングのコンポーネント例

データタイプの定義

// types.ts
export interface Item {
  id: number;
  name: string;
}

ダミーデータの生成

// data.ts
import { Item } from './types';

export const data: Item[] = Array.from({ length: 100 }, (_, i) => ({
  id: i + 1,
  name: Item ${i + 1}
}));

ページングコンポーネント

// Paging.tsx
import React, { useState } from 'react';
import { Item } from './types';
import { data } from './data';

const ITEMS_PER_PAGE = 10;

const Paging: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE);

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const getPaginatedData = () => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    return data.slice(startIndex, endIndex);
  };

  return (
    <div className={styles.container}>
      <ul className={styles.list}>
        {getPaginatedData().map((item: Item) => (
          <li key={item.id} className={styles.item}>
            {item.name}
          </li>
        ))}
      </ul>
      <div className={styles.pagination}>
        {Array.from({ length: totalPages }, (_, i) => (
          <button
            key={i}
            className={currentPage === i + 1 ? styles.active : ''}
            onClick={() => handlePageChange(i + 1)}
          >
            {i + 1}
          </button>
        ))}
      </div>
    </div>
  );
};

export default Paging;

コンポーネントの使用例

// App.tsx
import React from 'react';
import Paging from './Paging';

const App: React.FC = () => {
  return (
    <div>
      <h1>ページングの例</h1>
      <Paging />
    </div>
  );
};

export default App;

この例では、Pagingコンポーネントを使用して、ダミーデータをページごとに表示しています。
各ページには10項目が表示され、ページの変更ボタンをクリックすることで現在のページを変更できます。
Paging.module.scssファイルでスタイルを定義しています。