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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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