The special React prop child values nested between a component’s opening and closing JSX tags. Typing it narrowly as string fails when JSX combines text, expressions, booleans, numbers, elements, arrays, or no value. section 5.3.2
Choose the type according to the component’s intended content:
- Use string only for components that deliberately accept plain text. section 5.3.2
- Avoid manually expanding unions for every JSX case; ReactNode covers the relevant child values and additional edge cases. section 5.3.2
- Use PropsWithChildren when combining ordinary component props with the standard children prop. section 5.3.2
Typed heading with optional children
import { type PropsWithChildren } from 'react'; interface HeadingProps { isLarge?: boolean; } function Heading({ isLarge = false, children }: PropsWithChildren<HeadingProps>) { return <h1 style={{ backgroundColor: "hotpink", fontSize: isLarge ? '48px' : '36px' }}>{children}</h1>; } <Heading isLarge>This is important!</Heading> section 5.3.2
import { type ReactNode } from 'react';
interface HeadingProps {
children?: ReactNode;
}
function Heading({ children }: HeadingProps) {
...
}
Inspect the concise ReactNode declaration for a component accepting optional children. section 5.3.2
