[Next.js] <>(フラグメント)にkeyプロパティを書くとエラーが出る。React.Fragmentを使う

Next.js
投稿日: カテゴリー Next.js/React

<>にkeyプロパティを書くとエラーが発生します。

{posts.map(post => (
    <key={post.id}> // error
        <div>{post.id}</div>
        <div>{post.title}</div>
    </>
))}

解決策: React.Fragmentを使う

{posts.map(post => (
    <React.Fragment key={post.id}>
        <div>{post.id}</div>
        <div>{post.title}</div>
    </React.Fragment>
))}

広告