Hello, I have created as minimal of an example as I can. The title is confusing because as far as I can tell the error I am actually getting is not caused by a singular issue, considering there are multiple posts with this error that have different issues. (Although none of them seem to have an actual solution posted either…)
How do I fix this?
Error: An object was provided as `children` instead of a component, string, or number (or list of those). Check the children property that looks something like:
{
"0": {
"props": {
"children": "Delete",
"id": {
"index": 1,
"type": "Delete"
},
"className": "delete",
"n_clicks": 0
},
"type": "Button",
"namespace": "dash_html_components"
}
}
at validateComponent (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_11_1m1689279492.dev.js:2986:11)
at BaseTreeContainer.getComponent (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_11_1m1689279492.dev.js:3624:79)
at BaseTreeContainer.render (http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_11_1m1689279492.dev.js:3800:19)
at finishClassComponent (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:17295:33)
at updateClassComponent (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:17245:26)
at beginWork (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:18755:18)
at HTMLUnknownElement.callCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:182:16)
at Object.invokeGuardedCallbackDev (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:231:18)
at invokeGuardedCallback (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:286:33)
at beginWork$1 (http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_11_1m1689279492.14.0.js:23338:9)
The example I have created is here. Note the annotations because they are probably more helpful than the title.
I am running Dash version 2.11.1, on Windows.
from dash import Dash, html, Output, State, Input, Patch, ALL, ctx
app = Dash(__name__)
server = app.server
layout = html.Div([html.Button("Add", id="add", n_clicks=0), html.Div(id="my-div")])
@app.callback(
Output("my-div", "children", allow_duplicate=True),
Input("add", "n_clicks"),
prevent_initial_call=True,
)
def add_row(button_clicked):
# The error is only thrown when the Add button is clicked and presumably when this callback is run.
patched_list = Patch()
def new_row():
return html.Button(
children="Delete",
id={"index": button_clicked, "type": "Delete"}, # When ID is removed no error is thrown
className="delete",
n_clicks=0,
)
patched_list.append(new_row())
return patched_list
@app.callback(
Output("my-div", "children", allow_duplicate=True),
Input({"index": ALL, "type": "Delete"}, "n_clicks"),
State({"index": ALL, "type": "Delete"}, "id"),
prevent_initial_call=True,
)
def delete_row(n_clicks, id):
# When this callback is missing no error is thrown.
patched_list = Patch()
triggered_id = ctx.triggered_id
del patched_list[triggered_id]
return patched_list
if __name__ == "__main__":
app.layout = layout
app.run_server(debug=True, use_reloader=True)
I combined two separate examples on the pattern-matching callbacks page so I have no idea if I did it correctly.
Thanks.