← Home

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!

← Home

Erben Systems GmbH

Watterstrasse 81, c/o Sarbach Treuhand AG, 8105 Regensdorf, Switzerland

CHE-174.268.027 MwSt