[Next.js/React] keyをつけても”Warning: Each child in a list should have a unique “key” prop.”のエラーが消えない時の確認事項

Next.js

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>
)

エラーが消えない原因は、<></>です。これを消せばエラーは消えます。実際に私がエラーにはまった原因がこれでした。複雑で長いコードを書いていたので、この単純なミスに気づきませんでした。

広告