Fresh JSX bug? Component children not passed to parent as array
In standard Preact/Preact, children that are passed to a parent component in jsx style...
<TestParent>
<h1>Child 0</h1>
<p>Child 1</p>
</TestParent>are identified by the parent as an array (of ComponentChild, I suppose).
In Fresh this expected behaviour breaks. Instead, the children are somehow baked into an single object. This makes it impossible to handle the child items independently - for example mapping over them to wrap each of them in yet another component, or whatever.
It doesn't seem to matter if used in an Island context or server generated.
I guess this must be concidered a bug.
Here below is a test parent component that I've been using to identify the problem:
export function TestParent(
{ children }: { children?: preact.ComponentChildren },
) {
console.log("Children is array:", Array.isArray(children));
return (
<div>
{children}
</div>
);
}A workaround is to prepare the children as an array, and pass that as children property value...
export default define.page(function Home(ctx) {
// preparing children as an array
const children = [
<h1>Child 0</h1>,
<p>Child 1</p>,
];
return <TestParent children={children} />;
});...but that's not always possible.
Source: freshframework/fresh