リストのレンダリング
CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 35/42。
データは通常配列の形で提供され、map は配列を要素のリストに変換します：
const fruits = ['Apple', 'Banana', 'Cherry'];
<ul>
{fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>map は各要素に対してアロー関数を1回ずつ呼び出し、返された <li> 要素を収集します。React は配列全体をレンダリングします。データにフルーツを追加すると、リストは自動的に増加します。マークアップを変更する必要はありません。
key={fruit} 属性は、各要素に安定した識別子を与えます。詳細については次のレッスンで説明します。今のところは、map から return する要素に常に一意の key を含めるようにしてください。
チャレンジ
簡単データからメニューをレンダリングします。
<ul id="fruit-list">内でmapを使用して、配列内の `fruit` ごとに1つの<li>をレンダリングします。- 各
<li>には果物の名前を表示し、それをkeyとして使用します。
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。