Self-invoking function as React children
devterminal
Posted on May 10, 2022
I always wanted to be able to use return statement on children rendering. Self-Invoking Function is the solution. This is an example of building page states inside of the Layout component. 💡🧑💻
const SelfInvokingChildren = () => {
const [loading, error, data] = useData()
return (
<Layout>
{(function () {
if (loading) return <Placeholder />
if (error) return <Error />
if (!data) return <NotFound />
return <PageContent data={data} />
})()}
</Layout>
)
}
💖 💪 🙅 🚩
devterminal
Posted on May 10, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.