2 replies

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

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

layout

on the

Nav

Nav

element:

Type '{ title: string | undefined; }' is not assignable to type 'string'.

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

Layout

to wrap pages around. This

Layout

Layout

may or may not at times be given a

title

title

prop that sets the title for the tab

TTC

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

type Props = {
  children: ReactNode;
  title?: string;
};

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

The

Nav

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

layout

on the

Nav

Nav

element:

Type '{ title: string | undefined; }' is not assignable to type 'string'.

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

Layout

to wrap pages around. This

Layout

Layout

may or may not at times be given a

title

title

prop that sets the title for the tab

TS-newbie struggles with TS via NextJS Layout

Similar Threads

TS-newbie struggles with TS via NextJS Layout

Similar Threads

Similar Threads

Similar Threads