Skip to content

Fresh JSX bug? Component children not passed to parent as array #3888

Description

@cambiata

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions