Dear Panel Community,
The code below is a simpler approach using plain HTML components to demonstrate what I want to achieve using React. It produces a vertical stack of two buttons:
import panel as pn
import param
class SimpleButton(pn.reactive.ReactiveHTML):
label = param.String("Label")
_template = """<button id="btn">{{ label }}</button>"""
class SimpleStack(pn.reactive.ReactiveHTML):
objects = param.List()
_template = """
<div id="stack">
{% for obj in objects %}
<div id="obj">${obj}</div>
{% endfor %}
</div>
"""
SimpleStack(objects=[
SimpleButton(label="Button 1"),
SimpleButton(label="Button 2")
]).servable()
I’m trying to achieve the same result using React-based components as shown below:
import panel as pn
import param
class ReactButton(pn.reactive.ReactiveHTML):
label = param.String("Label")
_template = """<div id="widget"></div>"""
_scripts = {
"render": """
const root = ReactDOM.createRoot(widget);
root.render(
React.createElement("button", {}, data.label)
);
"""
}
__javascript__ = [
"https://unpkg.com/react@latest/umd/react.development.js",
"https://unpkg.com/react-dom@latest/umd/react-dom.development.js",
]
class ReactStack(pn.reactive.ReactiveHTML):
objects = param.List()
_template = """<div id="widget"></div>"""
_scripts = {
"render": """
// The use of data.objects below is not correct.
// I want to know how to properly use it to obtain
// the same result as with the SimpleStack case.
const stack = React.createElement("div", {}, data.objects);
const root = ReactDOM.createRoot(widget);
root.render(stack);
"""
}
__javascript__ = [
"https://unpkg.com/react@latest/umd/react.development.js",
"https://unpkg.com/react-dom@latest/umd/react-dom.development.js",
]
As noted above, I’m not using data.objects correctly/properly at the JS level. I would like to know how to adapt ReactStack so that it behaves similarly as SimpleStack.
Many thanks.