【React】<></>にkeyを渡したい時は省略せず<React.Fragment key={index}>と書く

コード

const hogeArray = [1, 2, 3, 4, 5]
export const App = () => {
  return (
    {hogeArray.map((hoge, index) => (
      <React.Fragment key={index}>
        <p>hoge</p>
      </React.Fragment>
    ))}
  )
}

export default App

説明

child in a list should have a unique "key" prop. が出る場合、
コンポーネントなどにすれば良いのだが、どうしてもフラグメントでwrapしたい時、

エラーになる

<key={index}></>

などとするとエラーになってしまう。

だから↓のように書く。

動作する

<React.Fragment key={index}></React.Fragment>

参考記事

https://tech.motoki-watanabe.net/entry/2021/01/10/143047