Skip to content

.tip

· one of the small things

The key goes on the element the map returns

The warning says a key is missing, you add one to the inner element, and the warning stays. React needs the key on whatever the callback returns, which is the outermost element, fragments included.

{posts.map((post) => (
  <Fragment key={post.slug}>
    <Separator />
    <PostCard post={post} />
  </Fragment>
))}

<> can't take a key, so import Fragment when you need one.

react