バイブス父さんの穴倉
みなさんこんにちは！！ひろしです！！！！
ひっさびさのブログ更新！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>
)
}
▸ この snippet は実行結果未収録
▸ 実行結果は未収録です
というか日頃こういうことをしたいケースが発生するのか？という話ですが、、
