ReactJSでネストされた配列を使用したテーブルの作成方法

1. データの準備: まず、表示したいデータをネストされた配列の形式で準備します。例えば、以下のようなデータを考えましょう。

const data = [
  {
    id: 1,
    name: 'John Doe',
    orders: [
      { id: 101, product: 'Product A' },
      { id: 102, product: 'Product B' }
    ]
  },
  {
    id: 2,
    name: 'Jane Smith',
    orders: [
      { id: 201, product: 'Product C' },
      { id: 202, product: 'Product D' }
    ]
  }
];

2. テーブルの作成: Reactコンポーネントを使用して、ネストされた配列のデータをテーブルとして表示します。以下は、シンプルな例です。

import React from 'react';
const Table = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Orders</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>
              <ul>
                {item.orders.map((order) => (
                  <li key={order.id}>{order.product}</li>
                ))}
              </ul>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};
export default Table;

この例では、dataプロパティを受け取り、各データ項目をテーブルの行として表示しています。mapメソッドを使用して、ネストされた配列のデータを展開し、適切な要素にマッピングしています。

3. コンポーネントの使用: 作成したテーブルコンポーネントを他の場所で使用することができます。例えば、以下のようにして使用します。

import React from 'react';
import Table from './Table';
const App = () => {
  return (
    <div>
      <h1>Nested Array Table Example</h1>
      <Table data={data} />
    </div>
  );
};
export default App;

上記の例では、Appコンポーネント内でTableコンポーネントを使用しています。Tableコンポーネントにデータを渡すためにdataプロパティを使用しています。これにより、ネストされた配列のデータがテーブルとして表示されます。

以上がReactJSでネストされた配列を使用したテーブルの作成方法の簡単な説明です。この方法を使用すると、ネストされたデータを視覚的に整理しやすいテーブル形式で表示することができます。