【React】複数のHTMLのElementを結合しレンダリングしたい

概要

Reactで条件によって表示・非表示を切り替えたいElementがある場合、三項演算子等を用いる方法が挙げられますが、複雑な条件がある場合は少し厳しいでしょう。その場合は、別途関数を作成してその中で判定をするようにすれば良いと思いますが、文字列結合のように複数のElementを結合したい場合は、どうすれば良いか。
実装方法を今回メモ書きしてみました。

対応方法

React.js combining static elementsの記事に、いくつか実装方法が紹介されています。個人的には配列にElement入れて、その配列をレンダリングする方法が一番スマートかなとは思いました。
Reactでは、配列に入れたElementをレンダリングする時は、自動的に結合してくれるみたいですね。

実装サンプル

以下の例では、propに設定されている値の有無に応じて、各要素の表示非表示を判定しています。実装としては値がある場合は配列に追加して、無い場合は何もしないという感じにしています。

export default function SampleComponent(prop) {
  function renderSample(gender, silhouette, height, weight, size) {
    const renderHtml = [];
    if (!gender && !silhouette && !height && !weight && !size) {
      renderHtml.push(<>指定なし</>);
    } else {
      if (gender) {
        renderHtml.push(<div>性別：{gender.label}</div>);
      }
      if (silhouette) {
        renderHtml.push(<div>体型：{silhouette.label}</div>);
      }
      if (height) {
        renderHtml.push(<div>身長：{height}cm</div>);
      }
      if (weight) {
        renderHtml.push(<div>体重：{weight}kg</div>);
      }
      if (size) {
        renderHtml.push(<div>サイズ：{size}</div>);
      }
    }
    return renderHtml;
  }

  return (
    <>
      {renderSample(
        prop?.gender,
        prop?.silhouette,
        prop?.height,
        prop?.weight,
        prop?.size
      )}
    </>
  );
}