Reactのリストとキーをやさしく解説！初心者がつまずきやすいエラーと解決法
生徒
「Reactでリストを表示しようとしたら、エラーが出て止まってしまいました」
先生
「リスト表示は、初心者が一番つまずきやすいところですね」
生徒
「エラーの意味もよく分からなくて困っています」
先生
「よくある間違いを順番に見ていけば、必ず理解できますよ」
1. リストレンダリングでエラーが起きやすい理由
Reactでリストを表示するときは、 配列のデータを画面に並べます。
このとき、書き方を少し間違えるだけで、 エラーや警告が表示されます。
これはReactが画面の更新を安全に行うため、 細かいルールを持っているからです。
2. よくあるエラー① keyがない
リスト表示で最も多いのが、 keyが設定されていないエラーです。
keyとは、リストの一つ一つを見分けるための名札です。
import React from "react";
function App() {
const fruits = ["りんご", "みかん", "ぶどう"];
return (
<ul>
{fruits.map(fruit => (
<li>{fruit}</li>
))}
</ul>
);
}
export default App;
この場合、Reactは「どれがどの要素か分からない」と判断します。
3. keyを指定して解決する
keyを指定することで、 Reactは要素を正しく管理できます。
import React from "react";
function App() {
const fruits = ["りんご", "みかん", "ぶどう"];
return (
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
);
}
export default App;
4. よくあるエラー② mapの書き忘れ
配列をそのまま表示しようとして、 エラーになるケースも多いです。
function App() {
const numbers = [1, 2, 3];
return (
<ul>
{numbers}
</ul>
);
}
この書き方では、 Reactはどう表示すればよいか分かりません。
5. mapを使って正しく表示する
mapは、配列の中身を一つずつ取り出す仕組みです。
function App() {
const numbers = [1, 2, 3];
return (
<ul>
{numbers.map(num => (
<li key={num}>{num}</li>
))}
</ul>
);
}
6. よくあるエラー③ returnの書き忘れ
mapの中で表示内容を返していないと、 何も表示されません。
{numbers.map(num => {
<li key={num}>{num}</li>;
})}
これは「表示するものを返していない」状態です。
7. returnを書いて解決する
波かっこを使った場合は、 returnが必要です。
{numbers.map(num => {
return <li key={num}>{num}</li>;
})}
8. エラー文を怖がらない考え方
エラーや警告は、 間違いを教えてくれる案内板です。
最初は意味が分からなくても、 よく見るとヒントが書かれています。
一つずつ直していけば、 確実に理解が深まります。
9. リストのエラーを防ぐ基本ルール
リスト表示では、 mapを使うこと、 keyを付けること、 表示内容を返すこと、 この三つを意識しましょう。
これだけで、 多くのエラーは防げます。
