黄色い警告を消せ

初段 / 目安 20分

琥珀さんがコンソールを指さします。「動いてはいるんだけど、コンソールが黄色いんだ……『unique "key" prop』って。気持ち悪いから成仏させて」。

今回の呪いは、画面には出ません。店舗の一覧はちゃんと並んでいるし、押しても壊れません。それでもコンソールには黄色い警告が出ています。動いているのに警告が出ている、という状態です。

出ているのは Warning: Each child in a list should have a unique "key" prop. という警告です。配列から map で要素を並べたとき、React はそれぞれの要素に key を求めます。書いていないと、この警告が出ます。

なぜ求められるのかというと、React は画面を描き直すとき 前回と今回のリストを見比べて、差分だけを直そうとする からです。key があれば「この行は前回のあの行と同じものだ」と分かるので、並べ替えや途中への差し込みが起きても中身がずれません。key が無いと、React は並んだ順番だけで見比べます。順番が変わらないうちは平気ですが、途中に1件足したり並べ替えたりした瞬間に、入力欄の中身やチェック状態が別の行にくっついていく、という気味の悪い事故が起きます。

警告というのは「いつか事故る」の予言です。黄色いうちに供養しておくのが正しい態度です。

key に渡すのは、その要素を一意に指せる値 です。データにID があるならそれが最善です。今回の店舗データには id が付いているので、それを使ってください。配列の添字 (index) でも警告そのものは消えますが、並べ替えや削除があると添字は付け替わるので、ID がある場面でわざわざ添字を使う理由はありません。

key は map の中で いちばん外側に返す要素 に付けます。中の子要素に付けても警告は消えません。

完成条件

• map で並べている要素に key を付け、コンソールの警告を消す
• key には店舗データの id を使う
• 表示されている一覧の中身は今のまま変えない

進め方

初期コードは店舗の配列を map で li にして並べています。書き足すのは1か所だけです。表示は今も正しく出ているので、見た目を変える必要はありません。

直したあとは、コンソールに黄色い行が残っていないことを確かめてください。この問題の合格条件には「key= を書いたか」をソースで見るものが入っています。案内のコメントは判定の前に取り除かれるので、コメントに書いても通りません。

ヒントは3段階で、①方針、②使う構文、③部分解の順に出ます。1つも開けずに通せたら、その問題は自分のものです。

供養が済むと、師範が言います。「警告は『いつか事故る』の予言だ。黄色いうちに供養したのは正しい」。