The correct type is PropsWithChildren
. Say you have a component
function Code({ children }: { children: any }) {
return (
<code className="relative select-all rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
{children}
</code>
);
}
The type of children is not string, JSX.Element
, nor JSX.Element[]
. The most ergonomic type to use is PropsWithChildren
.
function Code({ children }: { children: PropsWithChildren }) {
return (
<code className="relative select-all rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
{children}
</code>
);
}
It's a simple problem, with a simple solution but it can be infuriating looking for the right type that accepts all kinds of inputs.
Thank you Joel for pointing out that PropsWithChildren
exists!
Erben Systems GmbH
Watterstrasse 81, c/o Sarbach Treuhand AG, 8105 Regensdorf, Switzerland
CHE-174.268.027 MwSt