DEV Community 👩‍💻👨‍💻

devterminal
devterminal

Posted on

Self-invoking function as React children

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.