SolidJS•11mo ago

Conditional Component Type rendering?

I am trying to work on a component where depending on a variable I need to wrap it with either an <a> tag or a <div>. The only conditional flow related documentation uses the <Show> component, but I'm trying to do something more akin to

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

// pseudo JSX
<props.url ? a : div>
   <div>the same other elements</div>
   <Etc />
</a or div>

I'm pretty sure something like the following would work, but how do I do this with basic HTML elements?

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

const ConditionalComponent = props.url ? componentA : componentB
...
<ConditionalComponent>
   <div>otherstuff</div>
</ConditionalComponent>

thanks!

2 Replies

REEEEE•11mo ago

You can use Dynamic. <Dynamic component={props.aTag ? 'a' : 'div'} children={props.children} /> https://www.solidjs.com/docs/latest/api#dynamic

HashtagOctothorpOP•11mo ago

excellent thank you!

Gaming

Programming

Conditional Component Type rendering?