Theo's Typesafe CultTTC
Theo's Typesafe Cult•4y ago•
2 replies
Mordi

TS-newbie struggles with TS via NextJS Layout

I am creating a simple layout file that looks like this:
type Props = {
  children: ReactNode;
  title?: string;
};

const Layout = ({ children, title }: Props) => {
  return (
    <div>
      <Nav title={title}/>
      <main>{children}</main>
      <Footer />
    </div>
  );
};


The Nav is structured to optionally taking a string prop to set as a title for for Head:
const Nav = (title?: string) => {
      <Head>
        {title?.length ? <title>{title}</title> : <title>Lineup Larry</title>}
      </Head>


The problem is that in the 
layout
 on the Nav element:
Type '{ title: string | undefined; }' is not assignable to type 'string'.

I understand and see what the problem is, but I don't know how to do things differently to make TS happy.

In case I'm not being clear about what I want to end up with: I want a reusable Layout to wrap pages around. This Layout may or may not at times be given a title prop that sets the title for the tab
Was this page helpful?