Reactで違うコンポーネントをmapでレンダリングする方法

2022年10月1日

みなさんこんにちは！！ひろしです！！！！

ひっさびさのブログ更新！MacbookAirを購入したので、キーボードがすごく打ちやすくカタカタしたくてブログを書こうと思いました！！

とはいってもブログの議題がないと記事が書けないので、今回は日頃触っているReactから違ったコンポーネントをmapで一気にレンダリングする方法について書いていきいと思います！！

同じようなコンポーネントであれば、そのままmapで表示することができますが、例えばAコンポーネントとBコンポーネントをランダムに一つの配列に入れてmapするときってどうするんだろうか？？と思いません？？

答えはこんな感じにできれば別のコンポーネントを合わせてmapすることができます！

const HogeComponent = () => {
  const AComponents = useMemo((): React.ReactNode[] => {
    return ['a', 'b', 'c'].map(v => <p>{v}</p>);
  }, [])

  const BComponents = useMemo((): React.ReactNode[] => {
    return ['1', '2', '3'].map(v => <p>{v}</p>);
  }, [])

  const renderComponents = useMemo((): React.ReactNode[] => {
    return [...AComponents, ...BComponents];
  }, [AComponents, BComponents])

  return (
  <div>
    {renderComponents.map(child => {
      return (
      <div>
        {child}
      </div>)
    })}
  </div>
  )
}

というか日頃こういうことをしたいケースが発生するのか？という話ですが、、