I have a component with no props other than children
, i.e.:
function Foo({ children }: React.PropsWithChildren<>) {}
React.PropsWithChildren
requires an argument. If I do React.PropsWithChildren<{}>
, Eslint produces Don't use `{}` as a type. `{}` actually means "any non-nullish value".
.
I'm using this for the empty object type:
type EmptyObj = { [k: string]: never };
However, React.PropsWithChildren<EmptyObj>
causes:
Type '{ children: Element; }' is not assignable to type 'EmptyObj'.
Property 'children' is incompatible with index signature.
Type 'Element' is not assignable to type 'never'.
What should I pass to React.PropsWithChildren
?
Edit:
I know I can just do:
function Foo({ children }: { children?: React.ReactNode }) {}
However, I'm using React.PropsWithChildren
throughout the codebase, so I'd prefer to keep it consistent.
The solution is:
function Foo({ children }: React.PropsWithChildren<Record<never, any>>) {}
If eslint warns you about type any
use Record<never, never>
instead.