3 ms·
I'm surprised this doesn't work since you could easily externalize this to a function: <Layout> <Header /> {getCorrectComponent(page)} <Footer />
by bern4444 5y ago
I'm surprised this doesn't work since you could easily externalize this to a function:
<Layout>
<Header />
{getCorrectComponent(page)}
<Footer />
</Layout>
const getCorrectComponent = (page) => {
switch (page) {
case 'home': return <Home />
case 'about': return <About />
default: return <NotFound />
}
}
- Eric_WVGG 5y agothat does work. imo ugly, not straightforward
- uhoh-itsmaciek 5y agoYeah, this is generally a good compromise. I sometimes like to write these as helper components instead: <Layout> <Header /> <Content page={page} /> <Footer /> </Layout> const Content = ({page}) => { switch (page) { case 'home': return <Home /> case 'about': return <About /> default: return <NotFound /> } }