Issues with nested components (Material UI) in my idom component.

[JeanFerreira91]

Hi everyone.

I've been digging into IDOM for a week or so and went through all the documentation to learn how to use it. All seem very promising, since we can import JS libraries such as Material UI. Documentation on this is a bit short (understandably) and don't show how to properly nest different components, and I'm trying to figure out what I'm doing wrong.

Let me explain.

I saw a post from @rmorshea in Dev where he showed how to implement custom JS components (from MUI in this case), and in the example he showed how to import the 'Slider' component from MUI. Had to tweak the code given in the example since idom.install() does not work anymore, so I'm using web.module_from_template() instead and seems to work as I'm able to pull the Slider container from MUI and works.

This kicked off my curiosity so I went to MUI's website to find other examples of the Slider component and see if I could make them work. So far I managed to set different configurations in the Slider.

My problem is, in the examples (code) they have the Slider component inside a Box component. I've been trying to surround a Slider in a Box component, but when I do, the Slider does not render anymore. I get no errors on my Terminal, and the server runs, so I'm not sure whether I don't know how to bring certain components, or I'm not nesting them the right way. So, any help or guidance will be appreciated.

My code looks like this at the moment:

import idom

from idom import web, html, use_state

mui = web.module_from_template(
    "react@^17.0.0",
    "@material-ui/[email protected]",
)

Box = web.export(mui, "Box")
Slider = web.export(mui, "Slider")

def valuetext(value):
    return "{}°C".format(value)

@idom.component
def SliderComponentMui():
    value, set_value = use_state([20, 70])
    
    def handle_change(event, newValue):
        set_value(newValue)
    
    return html.div(
        {
            "className": "slider-container",
            "style": {
                "width": "30%",
                "margin": "0 auto",
                "margin-top": "10%",
            },
        },
        Slider(
            {
                "defaultValue": 50,
                "step": 1,
                "min": 0,
                "max": 100,
                "aria-labelledby": "label",
                "aria-label": "Default",
                "valueLabelDisplay": "on",
            },
        ),
        Slider(
            {
                "getAriaLabel": lambda value: "Temperature range {}".format(value),
                "value": value,
                "onChange": handle_change,
                "valueLabelDisplay": "auto",
                "getAriaValueText": valuetext,
            },
        ),
    )

If I try to use the Box and surround the Sliders in it, then the Sliders stop rendering (doesn't even show when I inspect the html)

I saw other components (Card, Drawer, etc) and they all seem to have nested components. So I'll face the same issue when trying to implement them.

---

Thanks in advance.

[Archmonger]

There is a known limitation with module_from_template that prevents nesting exported components. Unfortunately, at this time nesting exported React components must be done via the JavaScript Components API.

However, I don't believe I ever tagged up with Ryan as to whether this limitation can be fixed in the future.

@rmorshea Do you have a quick comment regarding this one? I can draft the issue if it's resolvable.

[JeanFerreira91]

I'll check and see if I can understand how to work with the JavaScript Components API as you recommended.

Many thanks @Archmonger for your time and answer.

[rmorshea]

I'll have to take a look at this. I think I'd expect this particular case to work. Though nesting in this way can have issues, especially when different JS component libraries are involved.

[JeanFerreira91]

Ok no problem. At the moment I made my component(s) using React and now I just need to figure out how to use the JavaScript Components API as suggested by @Archmonger.

Thank you both for your time.