Creating a dropdown item from another dropdown created within a callback function

Question

So I'm new to Dash, with experience in Shiny, and am having a bit of trouble configuring a dropdown menu. So I have 3 tabs in Dash and the behavior I currently have is the creation of a dropdown menu when a user clicks on the medicaid tab. I don't want this dropdown to appear for the other two tabs, hence why it is in my callback function. This dropdown (e.g. state dropdown) then gives the user a list of states.

My issue really lies in how to get the input value from the state dropdown since it is in the callback function...

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from dash.dependencies import Input, Output
import plotly.graph_objs as go


app = dash.Dash(__name__)

df = pd.read_csv("Timely and Effective Care - Hospital.csv", engine='python', sep=None)

app.layout = html.Div(children=[

    # tab selection menu dynamically created
    html.Div([
       dcc.Tabs(
           id='menu-tabs',
           value='tab-1',
           className='custom-tabs-container',
           children=[
               dcc.Tab(
                   label='Medicaid',
                   value='medicaid',
               ),
               dcc.Tab(
                   label='Commercial',
                   value='commercial',
               ),
               dcc.Tab(
                   label='Uninsured',
                   value='uninsured'
               ),
            ]),
    html.Div(id='state-dropdown'),
    html.Div(id='sample')
    ])

], className='wrapper')


@app.callback(Output('state-dropdown', 'children'),
               [Input('menu-tabs', 'value')])
def render_dropdown(tab):
    if tab == 'medicaid':
        return html.Div(children=[dcc.Dropdown(id='states',
                                  options=[{'label': i, 'value':i}
                                  for i in df['State'].unique()]
                        )])

What I want is another dropdown to be created within the medicaid tab...after a user selects a state from the first dropdown, the second dropdown should only list hospitals within the state selected from the first dropdown.

Hospital names are under the hospital column in df.

Answer 1

Dash does not like components being added after building the layout (ex. inside a callback), which makes this approach tough. I suggest looking at this page and following the tab "Content as Tab Children" approach. This will let you keep at least the basic form of the dropdowns in the layout (including the all-important IDs), and then use the callback to populate the values.

At that point, the callback should be much easier, because it only needs to update the options prop of the callback component which already exists.