Multi-Dropdown invalid argument 'value'

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

USA = [
    "New York",
    "San Francisco",
    "Cincinnati",
]
CANADA = [
    "Montréal",
    "Toronto",
    "Ottawa",
]
country_dict = dict(USA=USA, CANADA=CANADA)

app = dash.Dash()
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
app.layout = html.Div([
    dcc.Dropdown(
        id="countries_dropdown",
        options=[
            {'label': 'America', 'value': 'USA'},
            {'label': 'Canada', 'value': 'CANADA'},
        ],
        value=["USA"],
        multi=True,
    ),
    dcc.Dropdown(
        id="cities_dropdown",
    ),
])


@app.callback(
    Output("cities_dropdown", "options"),
    [Input("countries_dropdown", "value")],
)
def update_cities_options(countries):
    cities = []
    for country in countries:
        cities += [dict(label=cities, value=cities) for cities in country_dict[country]]
    return cities


@app.callback(
    Output("cities_dropdown", "value"),
    [Input("cities_dropdown", "options")],
)
def update_cities_value(cities):
    if len(cities) != 0:
        return cities[0]
    else:
        return None


if __name__ == "__main__":
    app.run_server(debug=True)

I get error:
Invalid argument value passed into Dropdown with ID “cities_dropdown”. Value provided: { “label”: “New York”, “value”: “New York” }

What could be the error?

Thanks

Hi @AnastasiaV

The error is because the value property in the: Output("cities_dropdown", "value"),
is expecting a string or a number that corresponds to the ‘value’ in the options. In your example “New York”

However, the function returned the first element in options which is a dictionary.
{ “label”: “New York”, “value”: “New York” }

Try changing the return to:

return cities[0]["value"]
2 Likes

Thanks for the clarification, my dummy self write ‘value’ instead of ‘options’ and i have been pondering for 1 hour, WHY

Output(“cities_dropdown”, “value”)
to
Output(“cities_dropdown”, “options”)

2 Likes