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.
In standard Preact/Preact, children that are passed to a parent component in jsx style...
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:
A workaround is to prepare the children as an array, and pass that as
childrenproperty value......but that's not always possible.