How to fix Fragment cannot have keys in React

import { Fragment } from 'react';
// or
import React from 'react';

// ❌ Wrong - shorthand doesn't support keys
items.map(item => (
  <> key={item.id}
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </>
));

// ✅ Correct - explicit Fragment with key
items.map(item => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </Fragment>
));

// ✅ Good - using stable unique IDs
users.map(user => (
  <Fragment key={user.id}>
    <h3>{user.name}</h3>
    <p>{user.bio}</p>
  </Fragment>
));

// ⚠️ Avoid - array index as key (only if items never reorder)
users.map((user, index) => (
  <Fragment key={index}>
    <h3>{user.name}</h3>
    <p>{user.bio}</p>
  </Fragment>
));

// ❌ Wrong - non-unique keys
users.map(user => (
  <Fragment key="user"> {/* Same key for all items! */}
    <h3>{user.name}</h3>
    <p>{user.bio}</p>
  </Fragment>
));

// ✅ Shorthand is fine here - not in a list
function UserProfile({ user }) {
  return (
    <>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
      <button>Edit</button>
    </>
  );
}

// ✅ Explicit Fragment needed here - in a map
function UserList({ users }) {
  return users.map(user => (
    <Fragment key={user.id}>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </Fragment>
  ));
}

// .eslintrc.json
{
  "rules": {
    "react/jsx-key": ["error", {
      "checkFragmentShorthand": true
    }]
  }
}

import { Fragment } from 'react';

function DefinitionList({ terms }) {
  return (
    <dl>
      {terms.map(term => (
        <Fragment key={term.id}>
          <dt>{term.word}</dt>
          <dd>{term.meaning}</dd>
        </Fragment>
      ))}
    </dl>
  );
}