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>
  );
};

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>

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

2 Replies

Unknown User•3y ago

Message Not Public

MordiOP•3y ago

I see. Thank you! 🙂

Gaming

Programming

TS-newbie struggles with TS via NextJS Layout