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

データの準備まず、表示したいデータを含むネストされた配列を作成します。たとえば、以下のような形式のデータを考えます。

const data = [
  {
    id: 1,
    name: "John",
    age: 25,
    hobbies: ["reading", "gaming", "cooking"]
  },
  {
    id: 2,
    name: "Jane",
    age: 30,
    hobbies: ["hiking", "painting"]
  },
  // 他のデータ要素...
];

テーブルコンポーネントの作成次に、Reactコンポーネントを使ってテーブルを作成します。以下のようなコードを考えます。

import React from "react";
function NestedArrayTable({ data }) {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
          <th>Hobbies</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item) => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
            <td>
              <ul>
                {item.hobbies.map((hobby) => (
                  <li key={hobby}>{hobby}</li>
                ))}
              </ul>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default NestedArrayTable;

テーブルの表示作成したテーブルコンポーネントを適切な場所で使用して、データを表示します。たとえば、以下のように使用します。

import React from "react";
import NestedArrayTable from "./NestedArrayTable";
function App() {
  const data = [
    // データ要素の配列
  ];
  return (
    <div>
      <h1>Nested Array Table Example</h1>
      <NestedArrayTable data={data} />
    </div>
  );
}
export default App;

以上の手順に従うことで、React.jsでネストされた配列を使用したテーブルを作成し、表示することができます。この方法を使えば、複雑なデータ構造を持つテーブルを簡単に扱うことができます。