Represents the type of a function component. Can optionally receive a type argument that represents the props the component accepts.
React TypeScript Cheatsheet
// With props:type Props = { name: string }const MyComponent: FunctionComponent<Props> = (props) => { return <div>{props.name}</div>} Copy
// With props:type Props = { name: string }const MyComponent: FunctionComponent<Props> = (props) => { return <div>{props.name}</div>}
// Without props:const MyComponentWithoutProps: FunctionComponent = () => { return <div>MyComponentWithoutProps</div>} Copy
// Without props:const MyComponentWithoutProps: FunctionComponent = () => { return <div>MyComponentWithoutProps</div>}
The props the component accepts.
Optional
Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.
Legacy React Docs
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent' Copy
const MyComponent: FC = () => { return <div>Hello!</div>}MyComponent.displayName = 'MyAwesomeComponent'
Ignored by React.
Only kept in types for backwards compatibility. Will be removed in a future major release.
Represents the type of a function component. Can optionally receive a type argument that represents the props the component accepts.
See
React TypeScript Cheatsheet
Example
Example