Search code examples
reactjstypescriptstorybook

Property 'children' does not exist on type after assigning type React.FC to component

I have assigned type React.FC to my component but I still dont't have access to the children props. I get this error "Property 'children' does not exist on type 'ButtonProps'". Is there another reason why I can't access the children props?

import React from 'react'

export interface ButtonProps{
    label:string;
}

const Button:React.FC<ButtonProps> = (props) => {
  const {children} = props
  return <div>{children}</div>
}

export default Button
Solution

  • Using React.FC is discouraged, so for now you should define the type of your component and be explicit about its children prop like this:

    export interface ButtonProps{
    label:string;
    children: React.ReactNode
}

const Button = (props: ButtonProps) => {
  const {children} = props
  return <div>{children}</div>
}