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

user_10922494 0
Viewed 1472

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
storybook typescript reactjs
2 Answers

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

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.

user_759900
Related