概要

JavaScriptではjoinメソッドで、配列の値をseparatorで結合して結果を取得することができます。ただ、joinメソッドはWhat is the join() method of an array in TypeScript?の記事にある通り、文字列型で返す用の関数になります。
では、ReactのElement要素の配列をjoinのような形式で結合したい場合、どうすれば良いのかというのを今回メモ書きします。

対応方針

やりようは幾つかあると思いますが、granmoe/ React Join Childrenの記事にある通り、reduceとsliceを使うやり方が、すっきり書けそうな感じはします。
reduceでseparatorの要素を追加していき、slice(0, -1)で最後に追加したseparator要素を削除する形になります。

実装サンプル

上記の記事で書かれていた実装ほぼそのままですが、サンプルをのせておきます。

export const SampleComponent: FC<Props> = ({ sampleList }) => (
  <div>
    {sampleList
      .map((sample) => {
        return <div>{sample.value}</div>
      })
      .reduce<ReactNode[]>((prev, curr) => {
        return [...prev, curr, <div>separator</div>]
      }, [])
      .slice(0, -1)}
  </div>
)