JSX で map関数を使うときに return を省略できる条件

はじめに

Javascript のmap関数で関数内のコールバック関数を書く際に、return を省略できるケースについて、理解が曖昧でしたので調べてみました。

本題

アロー関数の省略形として次の挙動については学習済みでした。

// 1行の場合、returnと{}を省略可能
todos.map((todo) => todo.id === id )
// 引数が1つの場合、returnと () を省略可能
todos.map(todo => todo.id ===id )

一方で、React でJSX内に書くケースで考えてみます。

function TodoPage({ todos }) {
  return (
    <div>
      {todos.map((todo) => (
        <div>
          {/* ... */}
        </div>
      ))}
    </div>
  );
}

map関数内の(todo) => ( ... ) は、即時に評価されるアロー関数で()を使ってJSX要素を返しており、この場合は returnは省略可能です。

function TodoPage({ todos }) {
  return (
    <div>
      {todos.map((todo) => {
        <div>
          {/* ... */}
        </div>
      })}
    </div>
  );
}

この場合、アロー関数のボディが波括弧 {} で囲まれていて、JSX 要素を返すためには return キーワードを明示的に使用する必要があります。

function TodoPage({ todos }) {
  return (
    <div>
      {todos.map((todo) => {
      return (
        <div>
          {/* ... */}
        </div>
        );
      })}
    </div>
  );
}

このように書くことで　動作します。

まとめ

JSX を返す map関数のコールバック関数は、 JSXを()で囲うことで return 無しで書くことができる