SolidJS•14mo 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•14mo 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•14mo ago

why not just do

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

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

Otonashi•14mo ago

there is no toArray on the children prop

jesseb34r•14mo 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•14mo ago

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

jesseb34r•14mo ago

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

FutureLights•14mo ago

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

Otonashi•14mo ago

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

Gaming

Programming

Wrap each child