本記事では、ReactでコンソールログにWarning: Each child in a list should have a unique “key” prop.のエラーが表示された時の対処法について解説しています。
Reactの学習におすすめ参考書
モダンJavaScriptの基本から始める React実践の教科書
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
Contents
対処法
まず始めにエラーの対処法ですが、とても簡単でkey属性の値に一意のキーを指定するだけでOKです。下記のコードはWarning: Each child in a list should have a unique “key” prop.のエラーが出力されます。
import { useState } from "react";
function App() {
const [values, setValues] = useState(["A", "B", "C", "D", "E"]);
const onDeleteBtnClicked = (v) => {
const newValues = values.filter((value) => value !== v);
setValues(newValues);
};
return (
<ul>
{values.map((value) => (
<li>
<button onClick={() => onDeleteBtnClicked(value)}>削除</button>
{value}
</li>
))}
</ul>
);
}
export default App;
どこにkey属性を設定するのかというと、mapメソッドで展開されている子要素のHTML(JSX)に設定します。今回の場合ですと、liタグに設定します。
{values.map((value) => (
<li key={value}>
<button onClick={() => onDeleteBtnClicked(value)}>削除</button>
{value}
</li>
))}
これでコンソールログにエラーが出力されなくなりましたが、何故key属性を指定する必要があるのでしょうか?詳しく見ていきましょう。
key属性を付ける意味
key属性を付ける意味は、Reactがどの要素が追加/削除/変更されたかを識別出来るようにするためです。言葉だけだと分かり辛いと思うので、先ほどのサンプルコードを使用してどのように変化するか確認してみましょう!
まずは検証ツールのElementsタブを開き、key属性を設定していないエラー解消前のサンプルコードで削除ボタンをクリックしてみましょう。

すると、関係ない要素まで再レンダリングされていることが分かります。本来Reactは仮想DOMで変更前と変更後を比較し変更のあった差分だけDOMに反映させる方法でパフォーマンス向上を実現しているのでこれはNGになります。※Warningエラーなのでプログラム自体は動きます。
次に、key属性を設定したエラー解消後のサンプルコードで削除ボタンをクリックしてみましょう。

エラー解消前のサンプルコードと見比べると、必要最低限の再レンダリングで済んでていることが確認できます。