Currently, I am delving into NextJS / TypeScript and have come across a type error. The component structure is as follows:
interface LayoutProps {
children: React.ReactNode;
title: string;
keywords: string;
description: string;
}
const Layout: React.FC<LayoutProps> = ({ title, description, keywords, children }) => {
return (
<div>
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta name="keywords" content={keywords} />
</Head>
<Header />
<div className={styles.container}>{children}</div>
<Footer />
</div>
);
};
However, I face an issue with TypeScript when using Layout to wrap any component:
interface HomePageProps {}
const HomePage: React.FC<HomePageProps> = ({}) => {
return (
// Type '{ children: Element; }' is missing the following properties from type 'LayoutProps'
<Layout>
<h1>Home Page</h1>
</Layout>
);
};
I have attempted different solutions like passing defaultProps and making the children prop optional as shown below but none of them were successful.
interface LayoutProps {
children?: React.ReactNode | null;
title: string;
keywords: string;
description: string;
}
const Layout: React.FC<LayoutProps> = ({ title = 'title', description = 'desc', keywords = 'kw', children = null }) => {...}
Any suggestions or assistance at this point would be greatly appreciated. Thank you in advance!