Children props in Typescript

May 28, 2023

How to pass children props for your component in Typescript.

Set children type to React.ReactNode

type Props = {
  title: string;
  children: React.ReactNode; // or just ReactNode
};

const Layout = ({ title, children }: Props) => {
  return (
    <>
      <h1>{title}</h1>
      {children}
    </>
  );
};

export default Layout;

Then you can add children component/s

<Layout title='Hello'>
  <p>World!</p>
</Layout>