Ryan Carniato
1 min readDec 16, 2019

--

Sure. To keep the same form since the children are static, in Solid you could write:

const UnorderedList = ({ children }) => (
<ul>
{
children.map(child => <li>{child}</li>)
}
</ul>
)
const App = () => (
<UnorderedList>
<a href="http://example.com">Example</a>
<span>Example</span>
Text
</UnorderedList>
);

However, assuming general purpose that would optimize for dynamic children I’d use Solid’s For Component:

const UnorderedList = props => (
<ul>
<For eacb={props.children}>{
child => <li>{child}</li>
}</For>
</ul>
)

--

--

Ryan Carniato
Ryan Carniato

Written by Ryan Carniato

FrontEnd JS Performance Enthusiast and Long Time Super Fan of Fine Grained Reactive Programming. Member of Marko Core Team. Author of SolidJS UI Library.

Responses (1)