Reactで開発をしていると、次のような警告を見たことはありませんか？
Missing "key" prop for element in iterator react/jsx-key
または
Warning: Each child in a list should have a unique "key" prop.この記事では、上記の警告について、
- 何を意味しているのか
- なぜ表示されるのか
- どう直せばいいのか
を、React初心者の方にもわかるように解説します。
Missing "key" prop for element in iteratorとは？
Missing "key" prop for element in iteratorは、「配列を使って要素を繰り返し表示しているのに、keyが指定されていない」ときに表示されるReactの警告です。
Reactでは、map()などを使ってJSXを繰り返し生成することがよくあります。
例えば、次のようなコードです。
function App() {
const items = ["Apple", "Banana", "Orange"];
return (
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>
);
}
dddddexport default App;このコードは見た目上は問題なく動作します。しかし、コンソールには次のような警告が表示されます。
Warning: Each child in a list should have a unique "key" prop.これはReactが、「このliたちはリスト表示されているけど、それぞれを区別するための目印（key）がないよ」と教えてくれている状態です。Reactは、map()などで繰り返し生成される要素を効率よく更新・差分検出するために、keyを使って各要素を識別しています。そのため、keyが指定されていないと、この警告が表示されます。
また、ESLintを導入しているプロジェクトでは、実行時の警告だけでなく、コード上でもエラー（または警告）としてMissing "key" prop for element in iteratorと指摘してくれることがあります。
代表的なのがreact/jsx-keyというESLintのルールです。このルールは、繰り返し処理（iteration）によって生成されるJSX要素には、必ずkeyを指定するという、Reactのベストプラクティスをチェックするためのものです。そのため、ESLintが有効な環境では、実行時にコンソールへ警告が表示される前の段階で問題に気づくことができます。具体的には、エディタ上で赤線や警告として表示されるため、コードを書いている最中に「keyが足りていない」ことを早めに検出できるようになります。
なお、keyを指定することで、Reactは各要素を正しく識別できるようになり、警告は消えます。なお、keyには「その要素を一意に識別でき、かつ安定している値」を指定するのが重要です。例えば、key={index}とすると、並び替え・追加・削除で問題が起きやすいので注意してください。
function App() {
const items = ["Apple", "Banana", "Orange"];
return (
<ul>
{items.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
);
}
export default App;本記事のまとめ
この記事ではMissing "key" prop for element in iteratorまたはWarning: Each child in a list should have a unique "key" prop.について説明しました。
Reactで配列を使って要素を表示する場合、keyの指定は必須です。keyを指定することで、Reactは各要素を正しく識別でき、効率よく画面を更新できます。警告が表示されたら、
map()で生成している要素にkeyがあるかkeyに一意で安定した値を指定しているか
を確認してみましょう。
お読みいただきありがとうございました。