CODEWITHSUNDEEP
reactjstypescript
Rodrigo
Rodrigo

Reputation: 291

JSX.Element' is not assignable to type 'FunctionComponent<{}>'

I am starting with React and Typescript and my code editor is claiming about my Button component (error bellow), but to eslint seems to be fine.

import React from 'react'

interface Props {
  children: React.ReactChild | React.ReactChildren
}

const Button: React.FunctionComponent = ({ children }: Props) => {
  return <button>{children}</button>
}

export default Button

The error:

Type '({ children }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
  Types of parameters '__0' and 'props' are incompatible.
    Type '{ children?: ReactNode; }' is not assignable to type 'Props'.
      Types of property 'children' are incompatible.
        Type 'ReactNode' is not assignable to type 'string | number | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | ReactChildren'.
          Type 'undefined' is not assignable to type 'string | number | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) =>

What is wrong on my code?

Upvotes: 4

Views: 13986

Answers (1)

Rodrigo
Rodrigo

Reputation: 291

Found the problem, shoud be:

const Button: React.FunctionComponent<Props> = ({ children }: Props) => (
  <button>{children}</button>
)

I was forgetting the Props on React.FunctionComponent

Upvotes: 8

Related Questions