I am looking to develop a component for my primary admin interface which will act as a wrapper for the individual screens.
Here is the JavaScript code I have:
import Header from '../Header'
function TopNavbarLayout({ children }) {
return (
<>
<Header />
<main>{children}</main>
</>
)
}
export default TopNavbarLayout
However, I want to convert it to Typescript. When attempting to do so, I encounter the following issue:
import Header from '../Header'
interface Props {
children: JSX.Element
}
const TopNavbarLayout = ({children} : Props) => {
return (
<>
<Header />
<main>{children}</main>
</>
)
}
export default TopNavbarLayout
Upon conversion, I receive a linting error stating that a type is expected and Visual Studio Code does not seem to recognize anything within <> and </> tags.
Any suggestions on how I can replace the JS component mentioned above in Typescript?
The {children} I plan to pass are various dashboards.