めずらしいケースだと思いますが、
<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を使うことで解決しました。