引用はClaudeの回答より。メモ。

ReactコンポーネントでJSXを返す場合、return文の中身にはJSX(React要素)しか書けません。

filterはJavaScriptの配列メソッドであり、関数を引数として受け取ることができるのに対し、ifはJavaScriptの制御文であり、値を返すものではありません。
この違いが、Reactコンポーネントの中でfilterは使えるがifは使えない理由になります。

filterって、条件つけて配列作るけど、制御ではないのだな。

ReactコンポーネントがJSXを返す際、JSXの中に記述できるのは以下の3つのみです。

他のReact要素(コンポーネントや組み込みDOM要素など)
式 (変数、関数呼び出し、算術演算など)
Reactの組み込みの論理&&やcondition ? true : false

制御文のif、for、while、switchなどはJSXの中に直接記述することはできません。
一方で、filterやmapなどの配列メソッドは、引数として渡された関数(無名関数)の実行結果をもとに、新しい配列を生成します。その関数の中でJSXを返すことができるため、結果的にfilterやmapの中でJSXを使うことができます。
つまり、filterやmapはJSX内で式として評価されるのに対し、ifはJSX内に直接記述できない制御文だからです。
ifなどの条件分岐を行いたい場合は、コンポーネント関数の外側で条件を評価し、その結果に応じて異なるJSXを返す必要があります。

式と制御文は違うと。

returnは入れ子にできないので、下記のように書くのもだめ。エラー。

return (
    if (条件) {
    return <TrueComponent />
    } else {
    return <FalseComponent />
    } 
)