What Type should I use for TypeScript props with children?

user_239879 0
Viewed 107

I'm doing:

export default function PageTitle(props: ReactElement) {
  return (
    <Typography variant='h3' style={{ fontWeight: 600 }} gutterBottom={true} {...props}>{props.children}</Typography>
  )
}

But I get a complaint:

Type error: Property 'children' does not exist on type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>'

What's the right type to use?

typescript reactjs
1 Answers

I will write it like this

   type Props = {
      children: string;
    };

     const PageTitle : React.FC<Props> = (props) => {
      return (
        <Typography variant='h3' style={{ fontWeight: 600 }} gutterBottom={true} {...props}>{props.children}</Typography>
      )
    }

    export default PageTitle;

or like this

type Props = {
  children: string;
};

 const PageTitle = ({children, ...props}: Props) => {
  return (
    <Typography variant='h3' style={{ fontWeight: 600 }} gutterBottom={true} {...props}>{children}</Typography>
  )
}

export default PageTitle;
user_67741620
Related