React.Fragmentを使って要素を複数返すループを実現する ✏️

f:id:kimizuka:20210416093201p:plain

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

<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>
  );
}