Reactでループで要素を出力する方法

Reactでループで要素を出力する方法

Reactでループを使って要素を出力する方法をTypeScriptで示します。

import React from 'react';

// Sample data to be rendered
const data: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

const FruitList: React.FC = () => {
  return (
    <ul>
      {data.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

export default FruitList;

このコードでは、dataという配列に果物の名前が格納されており、それをループで回して

要素に変換し、

内にレンダリングしています。 map関数を使ってループ処理を行い、各要素には一意のキー（ここではインデックス）を設定しています。 上記のコンポーネントを使用することで、リスト形式で果物の名前が表示されます。 これがReactでループを使って要素を出力する基本的な方法です。