引用は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 />
}
)