Image credits to: tranmautritam
Typescript requires that we specify the types for the different variables and function arguments in React. When they are native types it is not intrincate, but for React components it can be different. Here are 3 ways to specify types for React components that contain children as part of their props.
Types With ReactNode
The easiest way is manually, by specifying children as an optional React node.
type props = {
children?: React.ReactNode
}
const MyComponent = ({ children }: Props) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
Using React.FC
The second way is to use a FC (Functional Component) object provided by React, which leaves implicit the use of children and also prevents us from returning undefined. Consider that using React.FC is considered by some developers as a bad practice.
const MyComponent: React.FC<{}> = ({ children }) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
React.PropsWithChildren
The last way is to make use of the PropsWithChildren object provided by React which, as its name says, already includes the props with the children component, ready to be used directly.
type Props = React.PropsWithChildren<{}>
const MyComponent = ({ children }: Props) => {
return (
<div>
{children}
</div>
)
}
export default MyComponent
See what Typescript has to say on React at their official documentation