リストのレンダリング

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から返す要素に必ず一意のkeyを含めてください。

チャレンジ

簡単

データからメニューを描画します。

<ul id="fruit-list">の中で、配列内の果物ごとに1つの<li>を描画するためにmapを使います。
各<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>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

基本概念のすべてのレッスン

1Reactの概要

Reactとは？最初のコンポーネント 1つの親要素のルール JSXはHTMLではないまとめ：Reactの概要

4Props

Propsとは？Propsの渡しかた 2つのProps 同じコンポーネント、新しいデータ Children Prop まとめ：Props

7条件分岐とリスト

三項演算子によるレンダリング && を使った表示リストのレンダリングKey（キー）の重要性 Filter（抽出）してから Map（変換）まとめ：条件分岐とリスト

2JSX式

波括弧（カーリーブレース）波括弧内での演算属性での波括弧の使用 JSX内での関数呼び出しまとめ：JSX式

5ステートとイベント

ステートとは？クリックカウンターステップ単位のカウントステートによる切り替え独立したステートまとめ：ステートとイベント

8プロジェクト：プロフィールカード

ステップ 1：カードの構造ステップ 2：Propsを使ったカードステップ 3：いいねボタンステップ 4：フォローの切り替え

3コンポーネント

ビルディングブロック（基本要素）2つ目のコンポーネントコンポーネントの再利用ページの構成まとめ：コンポーネント

6フォームと入力

制御された入力（Controlled Inputs）入力の反響（Echo）文字数カウンタークリアボタンまとめ：フォームと入力