Reactにおける波括弧の省略に関して

Question

以下のコードにおいて、アロー以降の波括弧の有無でエラーが出るのですが、なぜ当該波括弧を省略する必要があるのでしょうか？

アロー関数の宣言方法として、処理部分が複数行になる場合は波括弧を使用するものと認識しているのですが、Reactでは別の記法が使用されるということでしょうか。

なお2つ目のsetTodosで発生するエラーはExpected an assignment or function call and instead saw an expressionです。

// エラーなし
setTodos((prevTodos) =>
  prevTodos.map((todo) =>
    todo.id === id ? { ...todo, completed: !todo.completed } : todo
  )
);

// エラーがでる
setTodos((prevTodos) => {
  prevTodos.map((todo) => {
    todo.id === id ? { ...todo, completed: !todo.completed } : todo;
  });
});

Answer 1

エラー自体は以下のようにreturnを記入することで解決した。
なお肝心の「なぜ波括弧を省けるのか」については、行数以前にアロー関数が式であるため、内部処理が複数行になっても単一式として見做されるということであった。

setTodos((prevTodos) => {
  return prevTodos.map((todo) => {
    return todo.id === id ? { ...todo, completed: !todo.completed } : todo;
  });
});

Answer 2

return文がないからでは？

簡潔文体においては、単一の式しか記述できないので、その式が暗黙的に return される値となります。しかし、ブロック文体においては、明示的に return 文を使用する必要があります。
アロー関数式 - JavaScript | MDN

Comments

[退会済みユーザー]

ありがとうございます。
波括弧の中で return を入れるとエラーがなくなりました。
ただ簡潔文体は単一の式しか使えないにも関わらず、mapで複数行になっても動作するというのが個人的に不可解なのですが、その点は式ではなく文だからOKということなのでしょうか？

[Lhankor_Mhy]

『簡潔文体』の場合には後に続くのは式、『ブロック文体』の場合には後に続くのはブロック、ということです。アロー関数式を含むmap関数が改行され複数行にわたって書かれているということは、直接関係のない話です。

[退会済みユーザー]

なるほど！理解しました。
式は内部処理が何行になろうとも単一の式であることに変わりはないので、扱う対象が単一式であれば行数は関係なしということですね。
大変参考になりました。ありがとうございます。