JSXの中でif...else文を使って条件分岐する - Qiita

Reactで開発をしていると、propsの値に応じて返すコンポーネントを変えたい場合が多々あります。 しかし、JSX内で実行できるのは式(expression)のみであり、if...else条件のような文(statement)は書くことができないため、複雑な分岐処理を書くためには工夫が必要になります。 案1. 三項演算子を組み合わせる 三項演算子を使った式A ? B : Cは、Aがfalseと評価された場合にCを返すだけなので、その後にCを起点として再び三項演算子の式を繋げることができます。 簡単な方法ですが、条件が複雑になると異様に読みづらくなります。 const Fruit = props => { return ( <div> {props.fruit === 'apple' ? ( <Apple /> ) : props.fruit === 'orange' ? ( <Orange