How to pass props and children to a component in react typescript?

Question

JavaScript

There is a component

import React from 'react';
import BackButton from 'components/buttons/BackButton';

type PropTypes = {
  title: string,
  goBackText?: string,
  children?: React.ReactElement,
} & typeof defaultProps;

const defaultProps = {
  goBackText: '',
  children: null,
};

const NamePagesBar = ({
  title, goBackText, children,
}:PropTypes) => (
  <div className="mx-auto px-4 h-18 flex items-center flex justify-between">
    <h1>{title}</h1>
    {goBackText && (
      <BackButton text={goBackText} className="flex items-baseline text-sm text-blue hover:text-blue-dark underline " />
    )}
    {children}
  </div>
);

NamePagesBar.defaultProps = defaultProps;

export default NamePagesBar;

I'm trying to send it

<NamePagesBar title={title}>
        <button>efreasrf</button>
      </NamePagesBar>

It gives such errors



. I think the problem is that children have defaultProps, because in other places I did something similar, but there children was mandatory and there were no problems.
PS I tried to set the ReactNode type for children, but the webstorm gives an error that the button is Element
How to do it right ?

Answer 1

defaultProps is irrelevant in TS

type PropTypes = {
  title: string
  goBackText?: string
};

const NamePagesBar: React.FC<PropTypes> = ({title, goBackText = ''}) => (<...>);