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

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

JavaScriptのmapの処理で、

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

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

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

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

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

今後のために

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

うまくいかないパターン

配列を

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

このように準備して、

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

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

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

うまくいったパターン

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

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

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

ピックアップ

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

おすすめ書籍

スポンサー

人気記事

おすすめ記事