How to fix React.Fragment requires a key prop when in a list in React

The shorthand syntax <> and </> cannot accept props. You must explicitly import Fragment from React and use the full syntax when you need to add a key prop.

Before (incorrect):

import React from 'react';

const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];

function List() {
  return (
    <ul>
      {items.map((item) => (
        <>
          <li>{item.name}</li>
          <li>{item.id}</li>
        </>
      ))}
    </ul>
  );
}

After (correct):

import { Fragment } from 'react';

const items = [{id: 1, name: 'Item 1'}, {id: 2, name: 'Item 2'}];

function List() {
  return (
    <ul>
      {items.map((item) => (
        <Fragment key={item.id}>
          <li>{item.name}</li>
          <li>{item.id}</li>
        </Fragment>
      ))}
    </ul>
  );
}

The key should be a unique value that remains stable across re-renders. Do not use the array index as a key, as this will cause problems if the list is reordered or items are added/removed.

Good:

{items.map((item) => (
  <Fragment key={item.id}>
    {/* content */}
  </Fragment>
))}

Bad (using index):

{items.map((item, index) => (
  <Fragment key={index}>
    {/* content */}
  </Fragment>
))}

Make sure you have imported Fragment from the 'react' package at the top of your file:

import { Fragment } from 'react';

Alternatively, you can import React and use React.Fragment:

import React from 'react';

{items.map((item) => (
  <React.Fragment key={item.id}>
    {/* content */}
  </React.Fragment>
))}

If you have multiple places in your component that render lists of fragments, update each one to use the explicit Fragment syntax with appropriate key props. Check that:

- Every Fragment in a loop has a unique, stable key
- The key is derived from the data (not the array index)
- The Fragment import is present in your file
- No other props (like id, className, etc.) are being passed to the Fragment