Is there a way to nest ReactiveHTML components?

Panel
1 
import param
from panel.reactive import ReactiveHTML
import panel as pn
pn.extension()

# nested reactive html

class NestedReactiveHTML(ReactiveHTML):

    value = param.Integer(default=0)

    _template = """
    <div style="border: 1px solid black; padding: 10px;">
        <div id="value">Value: ${value}</div>
    </div>
    """

    _scripts = {
        "increment": """
            data.value += 1;
        """
    }

class OuterReactiveHTML(ReactiveHTML):

    nested_value = param.ClassSelector(class_=NestedReactiveHTML)

    _template = """
    <div style="border: 1px solid black; padding: 10px;">
        ${nested_value}
    </div>
    """


OuterReactiveHTML(nested_value=NestedReactiveHTML()).servable()

Traceback:

bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:226 Error: attempted to redefine property 'NestedReactiveHTML00109.tags'
    at o.define (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:179:886)
    at r.decode_def (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:216:1506)
    at p._decode (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:1131)
    at bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:2249
    at f (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:178:450)
    at p._decode_plain_array (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:2237)
    at p._decode (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:928)
    at bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:614
    at p.decode (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:211:730)
    at S.from_json (bokeh.min.js?v=c8d721b75531cff043feef626ae0d6e29a26031fae26bba93c1baa962ecfb1b43f211027df3a0cf7772f30afed8c38198d70677b8967e581ca7e605358c68465:165:6011)
2

Would it work if you add the missing ‘id’ to the aecond component?

1 Like
3

Oh wow that worked!

import param
from panel.reactive import ReactiveHTML
import panel as pn
pn.extension()

# nested reactive html

class NestedReactiveHTML(ReactiveHTML):

    value = param.Integer(default=0)

    _template = """
    <div style="border: 1px solid black; padding: 10px;">
        <div id="value">Value: ${value}</div>
    </div>
    """

    _scripts = {
        "increment": """
            data.value += 1;
        """
    }

class OuterReactiveHTML(ReactiveHTML):

    nested_value = param.ClassSelector(class_=NestedReactiveHTML)

    _template = """
    <div id="abc" style="border: 1px solid black; padding: 10px;">
        ${nested_value}
    </div>
    """


OuterReactiveHTML(nested_value=NestedReactiveHTML()).servable()

Thanks so much for the quick response! That error message made me extremely frustrated.

1 Like