React.jsでのJSONからのネストされた配列のマッピング方法

1. map()メソッドを使用する方法: JSONデータを取得し、map()メソッドを使用して配列をマッピングすることができます。以下は例です。

const jsonData = {
  "users": [
    {
      "id": 1,
      "name": "John",
      "age": 25
    },
    {
      "id": 2,
      "name": "Jane",
      "age": 30
    }
  ]
};
const UserList = () => {
  return (
    <div>
      {jsonData.users.map((user) => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <p>Age: {user.age}</p>
        </div>
      ))}
    </div>
  );
};

2. コンポーネントを再帰的に呼び出す方法: ネストされた配列が多層にわたる場合、コンポーネントを再帰的に呼び出してマッピングすることができます。以下は例です。

const jsonData = {
  "categories": [
    {
      "id": 1,
      "name": "Category 1",
      "subcategories": [
        {
          "id": 11,
          "name": "Subcategory 1-1",
          "items": [
            {
              "id": 111,
              "name": "Item 1-1-1"
            },
            {
              "id": 112,
              "name": "Item 1-1-2"
            }
          ]
        },
        {
          "id": 12,
          "name": "Subcategory 1-2",
          "items": [
            {
              "id": 121,
              "name": "Item 1-2-1"
            },
            {
              "id": 122,
              "name": "Item 1-2-2"
            }
          ]
        }
      ]
    }
  ]
};
const Category = ({ category }) => {
  return (
    <div>
      <h2>{category.name}</h2>
      <ul>
        {category.subcategories.map((subcategory) => (
          <li key={subcategory.id}>
            <h3>{subcategory.name}</h3>
            <ul>
              {subcategory.items.map((item) => (
                <li key={item.id}>{item.name}</li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    </div>
  );
};
const CategoryList = () => {
  return (
    <div>
      {jsonData.categories.map((category) => (
        <Category key={category.id} category={category} />
      ))}
    </div>
  );
};

これらはReact.jsでJSONからネストされた配列をマッピングするための一般的な方法の一部です。JSONの構造に応じて適切な方法を選択し、コンポーネントを適切に作成してください。