Black Lives Matter. Please consider donating to Black Girls Code today.

Is there any way to make two objects share a property?

Hey all,

I’m trying to link multiple dropdowns, so the selection in any one of them, goes to all of them. I managed to create a “main” dropdown that passes its value to the rest of the dropdowns, but I can’t manage to make it work the other way around. Let’s simplify: I have dropdown 1 and 2. Currently if I change dropdown 1’s value, dropdown 2 also changes, but not the other way around. Is there any way to actually link their value?
The relevant part of my code looks like this:

html.Div(dcc.Dropdown(id='dropdown-1',
                      options=options_paises,
                      value=['Chile', 'France', 'Spain', 'Italy', 'United States'],
                      multi=True
                      )
html.Div(dcc.Dropdown(id='dropdown-2',
                      options=options_paises,
                      multi=True
                      )
@app.callback(Output(component_id='dropdown-2', component_property='value'),
              [Input(component_id='dropdown-1', component_property='value')])
def get_value(value):
    return value

But, as stated, this links only 2 to 1, but not 1 to 2. Is it possible to do it?

To my knowledge, there is no good solution (yet). But it can be done,

1 Like

Thanks @Emil, I’ll check if I understood and if I can make the solution work. But it seems it’s exactly what I’m looking for. Also, follow-up question: is it possible to add a default value when syncing like this?

Also, I’m getting a Circular dependencies error, even though the app is working just right. Is this expected?

Have you tried setting the initial value of both components and the sync store to the desired default value?

That worked! Didn’t know I could use the value property if I defined it on callbacks. Thanks a lot @Emil !