SolidJS•2y ago

Wrap each child

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>
}

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

8 Replies

Otonashi•2y ago

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()} ...

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

jesseb34r•2y ago

why not just do

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

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

Otonashi•2y ago

there is no toArray on the children prop

jesseb34r•2y ago

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

Otonashi•2y ago

the children helper does that otherwise evaluating props.children could give you anything

jesseb34r•2y ago

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

FutureLightsOP•2y ago

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

Otonashi•2y ago

the new child needs to be created but everything else should be reused

Gaming

Programming

Wrap each child