Dynamic tag name in Solid JSX

Question

I would like to set JSX tag names dynamically in SolidJS. I come from React where it is fairly simple to do:

/* Working ReactJS Code: */
export default MyWrapper = ({ children, ..attributes }) => {
  const Element = "div";

  return (
    <Element {...attributes}>
      {children}
    </Element>
  )
}

but when I try to do the same thing in SolidJS, I get the following error:

/* Console output when trying to do the same in SolidJS: */
dev.js:530 Uncaught (in promise) TypeError: Comp is not a function
  at dev.js:530:12
  at untrack (dev.js:436:12)
  at Object.fn (dev.js:526:37)
  at runComputation (dev.js:706:22)
  at updateComputation (dev.js:691:3)
  at devComponent (dev.js:537:3)
  at createComponent (dev.js:1236:10)
  at get children [as children] (Input.jsx:38:5)
  at _Hot$$Label (Input.jsx:7:24)
  at @solid-refresh:10:42

I would like to know if I miss something here, or whether it is possible to achieve this in SolidJS in any other way.

Answer 1

Solid has a <Dynamic> helper component for that use.

import { Dynamic } from "solid-js/web";

<Dynamic component="div" {...attributes}>
   {props.children}
</Dynamic>