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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions