React.Fragmentã‚’ä½¿ã£ã¦è¦ç´ ã‚’è¤‡æ•°è¿”ã™ãƒ«ãƒ¼ãƒ—ã‚’å®Ÿç¾ã™ã‚‹ ✏️

めずらしいケースだと思いますが、

<ul>
  {list.map((item, i) => {
    return (
      <li>{ item.title }</li>
      <li>{ item.text }</li>
    );
  })}
</ul>

というような感じで、要素を複数返したいケースに出くわしました。

<ul>
  {list.map((item, i) => {
    return (
      <>
        <li>{ item.title }</li>
        <li>{ item.text }</li>
      </>
    );
  })}
</ul>

と、Reactフラグメントのショートハンドを使うことを検討したのですが、

<ul>
  {list.map((item, i) => {
    return (
      <key={ i }> // => Error!
        <li>{ item.title }</li>
        <li>{ item.text }</li>
      </>
    );
  })}
</ul>

keyを渡すとエラーになります。

import { Fragment } from 'react';

export default function IndexPage() {
  return (
    <ul>
      {list.map((item, i) => {
        return (
          <Fragment key={ i }>
            <li>{ item.title }</li>
            <li>{ item.text }</li>
          </Fragment>
        );
      })}
    </ul>
  );
}

ショートハンドではなく、React.Fragmentを使うことで解決しました。