html.Div as a State of a dash callback

Dash Python
1

Hi,
I have a dash app whose callback has a children of an html.Div as a State. This children is either one dcc.Dropdown or two dcc.Dropdown: [dcc.Dropdown, dcc.Dropdown]. In my callback I want to access to the values of the callback, but I don’t know how to do that.

So I tried something like

@app.callback(Output(…, …), Input(…,…), State(‘div_id’, ‘children’))
def myfunction(input, children):
#some code using :

  • children[‘value’] or children.‘value’, when children is just a dcc.Dropdown
    return something

But I have an error saying that the syntax is not valid.
Could you help me, please ?
Thank you !

2

Hi @gamaievsky, welcome to the community!

You can’t access a property of each children like this, or at least this is not the best way to accomplish what you are trying to do.

The best way is to use the ids and ‘value’ property of each dcc.Dropdown as a State in your callback. But since you have a variable number of Dropdowns, it is more elegant to do it using pattern matching callbacks. Something like this:

# import ALL too!
from dash.dependencies import ALL

# simplified layout
app.layout = html.Div(
    [
        dcc.Dropdown(
            id={
                'type': 'grouped-dropdown',
                'index': 0
            },
            options=your_options0
        ),
        dcc.Dropdown(
            id={
                'type': 'grouped-dropdown',
                'index': 1
            },
            options=your_options1
        ), 
    ]
)


# pattern matching callback with state
@app.callback(
    Output(....),
    [Input(...)],
    State({'type': 'grouped-dropdown', 'index': ALL}, 'value') #important
)
def your_callback(all_input_variables, state_variables):
    # state_variables will be a list of len 2 
    # with 'value' from each Dropdown
    return something

Hope this helps!

1 Like
3

Thank you, it works!