[tsx]配列を map でレンダリング

map.tsx

import React from 'react';

interface Item {
  id: number;
  name: string;
}

const MyComponent: React.FC = () => {
  // 配列データを定義
  const items: Item[] = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' }
  ];

  return (
    <div>
      <h1>Items List</h1>
      <ul>
        {/* map を使って配列をループし、リストアイテムとして表示 */}
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default MyComponent;