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.
I was in the same situation and decided to go with:
PropsWithChildren<unknown>
Update:
See Jorrit's comment below, but React is making that the default for PropsWithChildren, which is now defined as type PropsWithChildren<P = unknown> ...
. That means we can simplify the example below to:
const MyComponent = ({ children }: PropsWithChildren) => { /* ... */ }
We're declaring a component that accepts children, but we don't know (or don't care) about other props it may have.
Example:
const MyComponent = ({ children }: PropsWithChildren<unknown>) => { /* ... */ }
// ...
<MyComponent>
<span>children</span>
</MyComponent>
Why not the FC type?
The use of the FC
type is discouraged. You can read more about it in this PR: https://github.com/facebook/create-react-app/pull/8177
You can just leverage the FC
type as follows:
const Foo: FC = ({ children }) => {
return <div>{children}</div>;
};
If you really want to stick to PropsWithChildren
, then use PropsWithChildren<unknown>
instead of PropsWithChildren<{}>
. The warning you get comes from typescript-eslint
and can be turned off for those cases as another option.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With