>
[Next.js/React] keyをつけても"Warning: Each child in a list should have a unique "key" prop."のエラーが消えない時の確認事項
Next.js/Reactのコンポーネントのreturn文の中でmapメソッドを書く時、繰り返す要素(一番外の要素)にユニーク(一意)なkeyプロパティを付ける必要があります。付けないと以下のエラーメッセージが表示されます。
Warning: Each child in a list should have a unique "key" prop.
keyをつけてもエラーが消えない？
以下は、keyプロパティを付けていてもエラーが消えない例です。
return (
<ul>
posts.map(post => (<>
<li key={post.id}>post.title</li>
</>))
</ul>
);エラーが消えない原因は、<></>です。これを消せばエラーは消えます。実際に私がエラーにはまった原因がこれでした。複雑で長いコードを書いていたので、この単純なミスに気づきませんでした。