Property 'children' is missing in type '{}' but required in type '{ childre-CodePudding

I'm attempting to learn react using a couple different sources and something isn't working in the example.

Property 'children' is missing in type '{}' but required in type '{ children: any; }

export default function Layout({ children }) {  return (
<div>
             {children}

I believe it is because I used typescript in my last example. Does anyone know how to fix this error? Do I have to know the type of children coming into this layout? If so, how do I handle this?

CodePudding user response：

It's good to use React.FC type which automatically types your components including your props (by generic) and children props.

import React from 'react'

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  )
}

export default Layout

import React from 'react'
import Layout from './somewhere/Layout'

const MyPageComp: React.FC = () => {
  return (
    <Layout>
      hello~ I'm children of Layout Component
    </Layout>
  )
}

export default MyPageComp

CodePudding user response：

According to HERE, React.FC should be avoided.

The best way is to properly specify the types with:

type LayoutProps = {
  children: React.ReactNode
}

export default function Layout({ children }: LayoutProps) {
  return <div>{children}</div>
}