Invalid argument `id` passed into Dropdown with ID

I am not able to do Pattern-Matching Callbacks and I don’t know why. I get this error : Invalid argument id passed into Dropdown with ID “[object Object]”.
Expected string.
Was supplied type object.
Value provided:
{
“type”: “filter-dropdown”,
“index”: 0
}

my code :

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL

app = dash.Dash(name, suppress_callback_exceptions=True)

app.layout = html.Div([
html.Button(“Add Filter”, id=“add-filter”, n_clicks=0),
html.Div(id=‘dropdown-container’, children=),
html.Div(id=‘dropdown-container-output’)
])

@app.callback(
Output(‘dropdown-container’, ‘children’),
Input(‘add-filter’, ‘n_clicks’),
State(‘dropdown-container’, ‘children’))
def display_dropdowns(n_clicks, children):
new_dropdown = dcc.Dropdown(
id={
‘type’: ‘filter-dropdown’,
‘index’: n_clicks
},
options=[{‘label’: i, ‘value’: i} for i in [‘NYC’, ‘MTL’, ‘LA’, ‘TOKYO’]]
)
children.append(new_dropdown)
return children

@app.callback(
Output(‘dropdown-container-output’, ‘children’),
Input({‘type’: ‘filter-dropdown’, ‘index’: ALL}, ‘value’)
)
def display_output(values):
return html.Div([
html.Div(‘Dropdown {} = {}’.format(i + 1, value))
for (i, value) in enumerate(values)
])

if name == ‘main’:
app.run_server(debug=True)

The code runs without any error on my system. What version of dash is installed on your system?

It was a version problem, as soon as I update dash, it starts to work.

Thanks!

2 Likes