Thank you for responding with good info. In my particular case though, I perhaps am remiss for posting a code example too hastily, for the problem is indeed nested lists and I cannot see why it’s a problem, nor now to reliably circumvent it. It seems I am beating my head against a wall for ignorance of the requirements of the components.
Here is an example straight from the docs (Popover - dbc docs):
import dash_bootstrap_components as dbc
import dash_html_components as html
popover_children = [
dbc.PopoverHeader("Popover header"),
dbc.PopoverBody("And here's some amazing content. Cool!"),
]
popovers = html.Div(
[
dbc.Button(
"Click",
id="click-target",
color="danger",
className="mr-1",
n_clicks=0,
),
dbc.Popover(
popover_children,
id="click",
target="click-target",
trigger="click",
),
]
)
So far, so good. Here’s a more complete example from my project (imports not shown; apologies for all the nesting, but I think it should be included considering the problem at hand); this WORKS:
row_5 = html.Div(
[
dbc.Row(
dbc.Col(
html.Div(
id="div-row-5",
className="div-row-5",
children=[
dbc.Row(
dbc.Col(
html.Div(
[
dbc.Button(
"Click",
id="click-target_button",
color="danger",
className="mr-1",
n_clicks=0,
),
html.Div(
[
dbc.Popover(
popover_children,
id="click",
target="click-target_button",
trigger="click",
),
]
)
]
)
),
),
],
),
)
),
]
)
Below does NOT WORK, and the error follows:
the_popover=dbc.Popover(
popover_children,
id="click",
target="click-target_button",
trigger="click",
),
row_5 = html.Div(
[
dbc.Row(
dbc.Col(
html.Div(
id="div-row-5",
className="div-row-5",
children=[
dbc.Row(
dbc.Col(
html.Div(
[
dbc.Button(
"Click",
id="click-target_button",
color="danger",
className="mr-1",
n_clicks=0,
),
html.Div(
[ #abstracted popover
the_popover
]
)
]
)
),
),
],
),
)
),
]
)
The error:
The children property of a component is a list of lists, instead of just a list. Check the component that has the following contents, and remove one of the levels of nesting:
[
{
"props": {
"children": [
{
"props": {
"children": "Popover header"
},
"type": "PopoverHeader",
"namespace": "dash_bootstrap_components"
},
{
"props": {
"children": "And here's some amazing content. Cool!"
},
"type": "PopoverBody",
"namespace": "dash_bootstrap_components"
}
],
"id": "click",
"target": "click-target_button",
"trigger": "click"
},
"type": "Popover",
"namespace": "dash_bootstrap_components"
}
]
I grant that, within the html.Div
is ‘nested’, the Button
and the_popover
. Why is this a problem? Even in the verbose, original form from the docs, the Popover
(which is already embedded in the popovers
list) contains a list (the header and body). Why is that OK?
Finally, it seems the only way to avoid this is to revert to the verbose form which is to lose any benefit of abstraction of the code.
I suppose there is an answer that makes sense. Finding it is the challenge.
Thank you!