Wrap each child

[calm mortar]

I would like to wrap each child in an element.

For example I have a list element and I wand ever child element to be wrapped in a li element. What's the proper way of doing this? I can do it like this with the children helper function, but is this a good way of doing it? Should I try to avoid this situation?

export const List: ParentComponent = (props) => {
    const c = children(() => props.children).toArray();
    return <ul>
        <For each={c}>
            {child => <li>{child}</li>}
        </For>
    </ul>
}

[dry storm]

this is more or less the correct way to do it except you should call toArray in the jsx otherwise the children may not update

const c = children(() => props.children);
return <For each={c.toArray()} ...

[wicked cape]

why not just do

return <For each={props.children.toArray()} />

[dry storm]

there is no toArray on the children prop

[wicked cape]

oh interesting. so you have to do a derived signal in order to type correctly? I don't quite understand how that works

[dry storm]

the children helper does that

otherwise evaluating props.children could give you anything

[wicked cape]

ah, I didn't see that in the original code, just glossed over it

[calm mortar]

Thanks! Would I be correct in assuming that everything needs recalculated for every new child?