How to render a SolidJS component?

I’m developing a custom menu for my application.

My idea is to render inside an element created in the body, a functional component. I’m using createRoot and render for this.

enter image description here

export function createMenu(e, Menu) {
    let x = e.clientX
    let y = e.clientY
    let menu_e = document.createElement('DIV')
    menu_e.className = "menu"
    menu_e.tabIndex = "-1"
    menu_e.style.top = y + "px"
    menu_e.style.left = x + "px"
    menu_e.id = "menu-option"

    document.body.appendChild(menu_e)

    createRoot(()=>{
        render(<Menu />, menu_e)
    })
}

The problem is that in a development environment it works and in production it doesn’t.

Displays the following error.

Uncaught (in promise) TypeError: z(...) is not a function
    at b1 (index-95c8fd86.js:12:64751)
    at HTMLDivElement.h [as $$contextmenu] (index-95c8fd86.js:14:874)
    at HTMLDocument.Jf (index-95c8fd86.js:1:14389)

Am I misusing Solid’s render, or is this not the correct way to render a functional component into an element ?

>Solution :

Yes, Solid’s render function accept a component function and an element to mount to:

render(() => <Menu />, domElement);

Or:

render(Menu, domElement);

But you are providing the result of function invocation rather than the function itself. Also, there is no functional component in Solid, React has that distinction but in Solid all components are function components since there is no class components.

It’s important that the first argument is a function: do not pass JSX directly (as in render(, …)), because this will call App before render can set up a root to track signal dependencies within App.

You can learn more about it: https://www.solidjs.com/docs/latest#render

Leave a Reply