【React】mapの戻り値は{}ではなく()で囲もう

はじめに

()と{}、ほんのちょっとした違いですが、ちゃんとJavaScriptを理解すると、その差は大きいです。

問題

Reactでルーティングの学習をしていました。

routesという配列からrouteを受け取って<Route>を生成するコードを書きましたが、画面上に何も表示されませんでした。

{routes.map((route) => {
    <Route
        key={route.path}
        exact={route.exact}
        path={route.path}
    >
        {route.children}
    </Route>
})}

原因

アロー関数の本体部分を{}で囲っているせいです。
ブロック{}ですと、引数を受け取って実行しているだけで、何も返却していません。

簡単な例を示します。

⭕️ 正しい

// 実行結果を返している
const result = (x, y) => (x + y);

console.log(result(3, 4)); // 7

❌ 誤り

// 実行しただけで何も返していない
const result2 = (x, y) => { x + y };

console.log(result2(3, 4)); // undefined

解決

()で囲んで、<Route>が返却されるように修正します。

{routes.map((route) => ( // ← (で囲む
    <Route
        key={route.path}
        exact={route.exact}
        path={route.path}
    >
        {route.children}
    </Route>
))}

追記

{}で囲み return する方法もあります。
@ykhirao様、コメントでのご指摘ありがとうございました。

{routes.map((route) => {
  return (
    <Route
      key={route.path}
      exact={route.exact}
      path={route.path}
    >
      {route.children}
    </Route>
  );
})}

終わりに

ほんのちょっとした差なのに、全然動作が異なりますね。