Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! ✅Check out the new docs.

Div of Dropdowns unexpectedly clear when Div is used as Output and State of callback

I want to be able to add dcc.Dropdown elements when a button is clicked. I can get the Dropdowns to appear, and I can select items from them. But whenever I select an item from a Dropdown, all other Dropdown selections reset. I have looked into registering the Dropdowns to callbacks as suggested here ( but it doesn’t change anything. Here is a minimal example:

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

app = dash.Dash(__name__)

app.layout = html.Div([html.Div([], 'dropdown-div'),
                       html.Button('+', id='add-dropdown')],

@app.callback(Output('dropdown-div', 'children'),
              [Input('add-dropdown', 'n_clicks')],
              [State('dropdown-div', 'children')])
def add_dropdown(n, dropdown_div):
    if n is not None:
        n_dropdowns = len(dropdown_div)
        dropdown_index = n_dropdowns + 1
        dropdown_id = f'dropdown{dropdown_index}'
        dropdown = dcc.Dropdown(dropdown_id, options=[{'label': '1', 'value': '1'},
                                                      {'label': '2', 'value': '2'},
                                                      {'label': '3', 'value': '3'}],
                                value='', multi=False)

        return dropdown_div

        raise PreventUpdate()

app.run_server(host="", debug=False)

If I remove the State input to the callback, things work as expected. But having the state in there is essential to the functionality. Any help is appreciated!

I found that a complete refactor was easier than trying to get this approach to work. If I choose a max number of Dropdown components I can make things work using the strategy described here: Dynamic Controls and Dynamic Output Components