3-4. リストをmapで表示する

配列をmapで展開してリスト表示する方法を学びます

React - 第1章: React基礎 - コンポーネントとJSX

📚

関連する教科書第1章: React基礎 - コンポーネントとJSX

課題：リストをmapで表示しよう

配列のデータを画面に表示する時は、map関数を使います。 Reactでは、繰り返し表示する要素にはkey属性が必要です。

やること

1.果物の配列を作る：["りんご", "バナナ", "オレンジ"]
2.map を使って各果物を <li> で表示
3.key 属性を正しく設定する

注意：最初はエラーが表示されますが、これは正常です。コードを完成させるとエラーが消えます。

mapの書き方

配列の各要素をJSXに変換します：

const fruits = ["りんご", "バナナ", "オレンジ"];

// mapで各要素をliタグに変換
<ul>
  {fruits.map((fruit, index) => (
    <li key={index}>{fruit}</li>
  ))}
</ul>

手順：

配列に対して .map() を呼ぶ
各要素をJSX（<li>など）に変換
key 属性を設定（通常はindex）

ポイント：key 属性は、 Reactがリストの変更を効率的に処理するために必要です。

期待される出力

• りんご
• バナナ
• オレンジ

function App() {
  // 1. ここに果物の配列を作成してください
  const fruits = /* 配列を作る */;
  
  return (
    <div>
      <h2>果物リスト</h2>
      <ul>
        {/* 2. ここでmapを使ってfruitsの各要素を<li>で表示 */}
        {/* 3. key属性を忘れずに！ */}
        
      </ul>
    </div>
  );
}

export default App;

Open Sandbox

← 前のレッスン: 3-2. Propsで値を渡す

次のレッスン: 3-3. JSXで条件分岐を使う →