React.Fragment要素を使うとどうしてもネストしなければ表現できないような構造時にラップする要素として使えます。この要素は何も HTML 要素を生み出しません。

この要素は要素として特別に扱われ、<>と</>で囲む方法が許されてます。

<>
  <div>contents1</div>
  <div>contents2</div>
</>

このコードは実際には以下のような結果となります。

<div>contents1</div>
<div>contents2</div>

属性を渡したい

ただ<></>では属性を渡すことはできません。例えば代表的なものにkey属性があります。その場合は普通にReact.Fragmentを要素として使います。

{[...Array(5)].map((_, i) => {
  return (
    <React.Fragment key=  {i}>
      <div>contents1</div>
      <div>contents2</div>
    </React.Fragment>
  );
})}