Using <For /> to Generate children of Component

[jcuenod]

I have a component that expects to receive a [children] array and interleaves them with other elements. In the parent, it sometimes makes sense to create the children with a <For each={children} />. The problem is that I'm getting a signal passed into the component now instead of an array of children. How do I handle that?

I tried

const children = typeof props.children === "function"
    ? props.children()
    : props.children

But this doesn't seem to be working.

[ryansolid]

Use Solid's children helper: https://github.com/solidjs/solid/blob/main/documentation/api.md#children

The problem is every time you access props.children you are recreating the children. If you wrap with children it will flatten out all nested reactivity and give you a signal you can work with.

[ryansolid]

I see yeah it may or may not be an array. That's fun. Open to suggestions.

[atk]

We could extend the helper to accept any JSX.Element and return an array form (undefined/null/false=[], singular Element=[Element], otherwise keep props.children); maybe even have an optional flag to resolve function components inside an extra handler.

[ryansolid]

I debated that but decided not wanting to take the overhead in the helper because I don't make similar concessions elsewhere. I meant are there TS suggestions? I know my thinking is backwards, I never want TS to affect what the runtime JS is. It's stubborn position but I still think in JavaScript, so when TS would have any impact on what I want to accomplish API or runtime-wise I'm inclined to blame its shortcomings rather than my unwillingness to play along.

[giubatt]

Maybe children should be able to receive an optional generic that will be the return type of the accessor, and it can be JSX.Element by default.

So if you know props.children is an array you can just use it like this
const c = children<JSX.Element[]>(() => props.children);
c would then be typed as Accessor<JSX.Element[]>

[ryansolid]

@giubatt yeah that sounds reasonable to me. If you type narrow so be it or just state it. Thanks.