Reactで任意の条件によってレンダリングするものを分けたいケース

Reactを使う際、他の言語では普通に書ける表現が、表現できない場面があります。

Reactを使う際のルールとして、あくまで書けるのは__『式』のみ__です(=値を返す表現のみ) JSXに埋め込めるのは式だけということ、これは、if文やfor文が書けないことを意味しています。

しかし、アプリケーションを開発する中で、条件によってレンダリングするものを出し分けたいケースは当然出てきます。その場合、boolean値が何もレンダリングされないReactの性質を利用します。

因みに、null、undefined、boolean値のtrue/falseは、{}の中では何も出力されません。 上記のルールがあることにより、以下は全て同じ出力となることに留意してください。

<div />
<div></div>
<div>{true}</div>
<div>{false}</div>
<div>{null}</div>

if文を代用する記法として以下の書き方があります。

const App = () => {
  const age = Math.floor(Math.random()* 20);
  const threshold = 10;

  return(
    <>
      // if文を代用する記法
      {age > threshold && <p>`age` is larger than {threshold}</p>}
      // if-else文を代用する記法
      <p>`age` is {age % 2 === 0 ? 'even' : 'odd'}</p>
    </>
  )
}

上記の age > threshold　や age % 2 === 0 は、true/falseを返すから、出力には影響を与えません。この仕組みを利用して、Reactでは分岐処理を書きます。