【React】フラグメントにkeyを渡す方法

リスト内でフラグメントを使う際、省略記法 <>...</> では key を渡せません。

// ❌ keyが設定できない
{items.map(item => 
  <>
    <h1>{item.title}</h1>
    <p>{item.body}</p>
  </>
)}

Fragment を明示的にインポートして使用します。

import { Fragment } from 'react';

// ✅ keyを渡せる
{items.map(item => 
  <Fragment key={item.id}>
    <h1>{item.title}</h1>
    <p>{item.body}</p>
  </Fragment>
)}

参考