Reactで配列をmapで繰り返しながら表示しようとするとレンダリングで何も表示されなかった件

Nextjsで実装していたときに、

JavaScriptのmapの処理で、

繰り返しながらレンダリングして、

描画をさせようとした時に、

なぜか描画されない事象が発生した。

ちょっとしたコードの書き方だが、

個人的にハマって時間を使ってしまったので、

今後のために

個人的な備忘録としてこの記事に残します。

うまくいかないパターン

配列を

const numbers = [1, 2, 3, 4, 5];

このように準備して、

mapで繰り返した時の書き方で、

以下の書き方ではうまくレンダリングされなかった。

{
  numbers.map((number) => {
    <>{number}</> 
  })
}

上記のコードを調整して、

変更後のコードはこちら。

{
  numbers.map((number) => 
    <>{number}</> 
  )
}