Videos
The correct type for a functional component is React.FunctionComponent or React.FC which is a shortcut alias for it
import React, { FC } from 'react';
const getTabContent: FC = () => {
switch (tab) {
case 1:
return <Images images={images} onSelect={onSelect}/>;
default:
return <Search onSelect={onSelect}/>;
}
};
The FC type simply add the children property to the props argument of the functional component so you can access it:
const SomeComponent: FC = ({ children }) => (
<div className="hello">{children}</div>
);
FC is a generic type so you can "add" props to your component:
interface SomeComponentProps {
foo: string;
}
const SomeComponent: FC<SomeComponentProps> = ({ children, foo }) => (
<div className={`Hello ${foo}`}>{children}</div>
);
Edit: React 18 update
Since React 18, FC doesn't add the children prop implicitly and offers an explicit way to do so with the PropsWithChildren generix type
Example:
type SomeComponentProps = { a: string };
const SomeComponent: FC<SomeComponentProps> = ({ a }) => <div>{a}</div>;
// This will fail when using the following expression
<SomeComponent>Hey I'm a child</SomeComponent>
Usage with children:
type ComponentWithChildrenProps = PropsWithChildren<{ a: string }>;
const ComponentWithChildrenProps: FC<ComponentWithChildrenProps> = ({
a,
children
}) => <div>{a} and {children}</div>
This allows to have a children prop a bit stricter. e.g.
type StrictCompProps = { children: string };
const StrictComp: FC<StrictCompProps> = ({ children }) => <div>{children}</div>;
// This will fail
<StrictComp><span>hey</span></StrictComp>
If you want to use FunctionComponent with class Component,
Then use React.ComponentType
The accepted answer for this question still stands, due to TypeScript types being erased, however as of Typescript 2.9, generic JSX components are supported
The example provided is:
class GenericComponent<P> extends React.Component<P> {
internalProp: P;
}
type Props = { a: number; b: string; };
const x = <GenericComponent<Props> a={10} b="hi"/>; // OK
const y = <GenericComponent<Props> a={10} b={20} />; // Error
Just thought it worth mentioning for anyone who ends up here via the question title.
This isn't possible to do using generics, though it's not clear why you would want to use generics for this problem rather than just providing the inner element using the normal props mechanism.
The reason is that types are erased, so you need to provide the class constructor to the class so that it has a reference to the value to instantiate in C. But there's no place other than the JSX props (or state or whatever you need to do) for you to pass in that value.
In other words, instead of writing
// not sure what you would expect the syntax to be?
const elem = <Div<Foo> ... />;
You should write
const elem = <Div myChild={Foo} />
and consume it in your render as
const Child = this.props.myChild;
return <div><Child /></div>;
As an aside, the correct constraint is new() => React.Component rather than React.Component -- remember that the things you write in the JSX (<Div>, etc) are the constructors for classes, not the class instances.