map関数で{}と()どちらを使用するかよくわからなかった件 〜アロー関数について〜

はじめに

Reactでmap関数を使用するときに{}と()のどちらを使用するのか理解できていなかったので今回はそれについてまとめます。

先に言ってしまえばこれはmap関数の問題ではなくJavaScriptのアロー関数への理解度が低いことが問題でした。

問題点

Reactで以下のコードを書いていました。
ボタンを押下したらonClickFetchUser関数が走り、その中でaxiosを使用してデータを取得し、取得した内容を画面上に表示させるというコードです。

    <div className="App">
      <button onClick={onClickFetchUser}>データ取得</button>
      {userProfiles.map((user) => {
        <UserCard key={user.id} user={user} />
      })}
    </div>

しかしボタンを押下しても画面には何も表示されません。

原因

mapの中でreturnを記述せずに{}を使用していたことが原因でした。

そもそもなぜこのような書き方をしてしまったかというと、Reactでコンポーネントを作成する時に以下のような書き方をするため、この書き方と混同していたためです。

{/* Userコンポーネントを作成する場合 */}
export const User = () => {
    return (
    {/* 処理 */}
    )
}

同じようにreturnを書いていれば問題ないのですがアロー関数が=>以降のものを自動的にreturnするということが抜けていました・・・

解決策

上記のように{}を使用する場合は必ずreturnを明示する必要があります。個人的にはこれが一番わかりやすいです。

      {userProfiles.map((user) => {
        return <UserCard key={user.id} user={user} />;
      })}

また、次のような書き方も可能です。
このようにアロー関数内の処理が1行の場合は{}とreturnは省略することができます。

      {userProfiles.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}

同じくアロー関数内の処理が1行の場合、次のように=>直後の()も省略可能です。

    {userProfiles.map((user) => <UserCard key={user.id} user={user} /> )}

終わりに

アロー関数について改めて整理ができました。