What type to give to a component passed in props in a child component?

Issue

Assuming i have this written in App.tsx :

<Layout 
    header={ <Header/> }
</layout>

and the Layout component :

export default function Layout({header, body}: any) {
return (
    <div className="layout">
        {header}
        {body}
    </div>
);

}

My props are typed as 'any' because i didnt found another way to type these props components.

Can you give me how to determine the type in my example ?

Thank you

Solution

I think you're looking for ReactNode:

type LayoutProps = {
  header: ReactNode;
  body: ReactNode;
}

export default function Layout(props: LayoutProps) {
  return (
    <div class="layout">
      {props.header}
      {props.body}
    </div>
  );
}

Answered By - David T.