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

Questions

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

December 20, 2021

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?

>Solution :

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