What TypeScript type should React children be set to?

Question

Here's my layout:

export default function Layout(children:any) {
  return (
    <div className={`${styles.FixedBody} bg-gray-200`}>
      <main className={styles.FixedMain}>
        <LoginButton />
        { children }
      </main>

      <footer>
        <FooterNavigation />
      </footer>
    </div>
  )
}

And my app:

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

To make my code a little cleaner, I'd like to set Layout(children:any) to an actual type instead of any, but I get this warning on my app page on Component when I change it to Layout(children:ReactNode):

TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes | (IntrinsicAttributes & string) | (IntrinsicAttributes & number) | (IntrinsicAttributes & false) | (IntrinsicAttributes & true) | (IntrinsicAttributes & ReactElement<...>) | (IntrinsicAttributes & ReactNodeArray) | (IntrinsicAttributes & ReactPortal)'.   Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

It makes sense then that I should set it to Layout(children:IntrinsicAttributes) { but when I do there's no option to import it. What should this be set to?

Answer 1

props is an object - children is a nested field inside props object.

interface LayoutProps {
   children: React.ReactNode;
}

function Layout({ children }: LayoutProps) {

Answer 2

The typings for React have a PropsWithChildren type that you can use:

function Layout({ children }: React.PropsWithChildren<{}>) {
    // ...
}

As others have stated, it's typed as:

children?: ReactNode;