JSX: Allow non-array JSXNode function components
Author: maurictgCreated Sep 28, 2026Updated Sep 28, 2026
Labelsenhancement
What is the feature you are proposing?
Hello,
I would love to be able to create function components using the jsx function, like below:
export function Partial({ name, children, tag = "div", ...rest }) {
return jsx(tag, { "x-partial": name, ...rest }, children);
}However, this will give me a Typescript error:
'Partial' cannot be used as a JSX component.
Its type '({ name, children, tag, ...rest }: PartialProps) => JSXNode' is not a valid JSX element type.
Type '({ name, children, tag, ...rest }: PartialProps) => JSXNode' is not assignable to type '(props: never) => FunctionComponentResult'.
Type 'JSXNode' is not assignable to type 'FunctionComponentResult'.
Type 'JSXNode' is not assignable to type 'HtmlEscapedString'.
Type 'JSXNode' is not assignable to type 'string'.A workaround I now use is wrapping the jsx call in an array:
return [jsx(tag, { "x-partial": name, ...rest }, children)];This will work fine, but I would see a method returing a single JSXNode work too. Is there any reason its now working this way?
Also, I didn't find the jsx method documented. I think there are good use cases for it, for writing "real" JSX isn't always my favorite option. Preact does document it for their similar functionality: https://preactjs.com/guide/v10/api-reference/#h--createelement
Source: honojs/hono