条件分岐処理とリストレンダリングを理解しよう

分岐・ループ

React における条件付きレンダーは JavaScript における条件分岐と同じように動作します。ifや、条件演算子などを使用して、UI を更新します。

以下、よく React で用いる条件分岐について述べていきます。

インラインでの条件分岐 : &&

&&演算子を使うと&&の前に書いた条件がtrueの場合のみ、&&の後の要素が出力される。

function TextBox(props) {
  const text = props.text;
  return (
    <>
      {text.length > 0 &&
        Your message: {text} words count: {text.length}
      }
    </>
  );
}

三項演算子を用いる場合

三項演算子condition ? true : false を用いると、条件分岐を簡潔に書ける。

return <>{text.length > 0 ? "Coming message!" : "not found"}</>;

リストレンダリングと Key

複数のコンポーネントをmap 関数などを用いて表現できます。

• この時、リストされる項目にはkey を割り当てる必要があります。
  • key は兄弟間でその項目を一意に特定できるような文字列を選ぶのがベスト(どうしようもない場合は map の index などを使う)
  • 基本、map() 呼び出しの中に現れる要素に key が必要です。