How to use an interface with props.children and other property types?

I am using Next.js and Typescript.

I have a layout component that using the following interface:

export interface AuxProps {
  children: React.ReactNode;
  pageTitle: 'string';
}

The component is here:

const Page = (props: AuxProps): JSX.Element => {
  return (
    <div className="whole-page">
      <div className="sidenav">
        <SideNav />
      </div>
      <div className="main">
        <Header pageTitle={props.pageTitle} />
        <div className={styles.bodySection}>{props.children}</div>
      </div>
    </div>
  );
};

However, when i want to use the pageTitle prop in another component, I get the error: Type '"Home"' is not assignable to type '"string"'.

But Home is not a type, its the value provided to the prop.

Here is how I am using it:

 let title: AuxProps = {
    pageTitle: 'Home',
  };


... inside the component ...

<Page pageTitle={title.pageTitle}>

...

I looked on SO, and i couldn’t find any examples of when props.childen is being used with other property values. Is that an issue?

>Solution :

In your interface it should be string instead of 'string' because 'string' here is string value like any other value 'test','test2' and you need string as a type.So using the code below should fix your issue

export interface AuxProps {
  children: React.ReactNode;
  pageTitle: string;
}