React Type error: '{ children: Element; }' has no properties in common with type 'Int-CodePudding

React error given to JSX elements. I got this error after bumping react version from 17 to 18.

CodePudding user response：

If you get this after upgrading to React 18, you must now change

export const MyFunctionComponent: React.FC = (props) => {...}

interface Props {
  children?: React.ReactNode
}
export const MyFunctionComponent: React.FC<Props> = (props) => {...}

CodePudding user response：

As of @types/[email protected], VFC no longer exists and FC no longer implies a children property. You must manually define the prop as

type Props = {
  // props
  children?: React.ReactNode
}
// or
type Props = React.PropsWithChildren<{
  // props
}>

const Component: FC<Props> = props => {
  // ...
}