I would like to create a component for my main admin interface as a wrapper for the individual screens.

Essentially this JS code:

import Header from '../Header'
  
function TopNavbarLayout({ children }) {
    return (
        <>
            <Header />
            <main>{children}</main>
        </>
    )
}

export default TopNavbarLayout

But in Typescript. When I try:

import Header from '../Header'

interface Props {
  children: JSX.Element
}

const TopNavbarLayout = ({children} : Props) => {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

export default TopNavbarLayout

I get the linting error that a type is expected and VsCode does not seem to recognize anything within <> and </>.

Does anyone have any advice for what I need to do to replace that JS component form above in TS?

The {children} I intend to send are different dashboards.

CodePudding user response：

The correct type for children is ReactNode, which is a union of all the kinds of things React accepts as children: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | null | undefined. (That doesn't seem to support arrays as children, but it does via ReactFragment, which is Iterable<ReactNode>.)

import { ReactNode } from "react";
// ...
interface Props {
    children: ReactNode;
}

Playground example