S
SolidJS•2y ago
HashtagOctothorp

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
REEEEE•2y ago
You can use Dynamic. <Dynamic component={props.aTag ? 'a' : 'div'} children={props.children} /> https://www.solidjs.com/docs/latest/api#dynamic
HashtagOctothorp
HashtagOctothorpOP•2y ago
excellent thank you!

Did you find this page helpful?