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>
)
}
Top comments (0)