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

Question

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

Answer 1

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>
}

Answer 2

Off topic: Do not pass to your component something your component will not use, try to destructure props in the head of your component. Thus, the component will get only what it needs, and you will know exactly what you are passing to the component, what are their props and default values if needed.