...
/Understanding the ID Parameter of Dash Components
Understanding the ID Parameter of Dash Components
Get familiar with identifying Dash components based on their ID values.
Let’s now look at how to identify components by setting their id values. After that, we’ll learn how to declare a component as Input or Output.
The id parameter of Dash components
Every Dash component has an id parameter that we can easily set in order to uniquely identify it. There is actually nothing more to this parameter than making sure that our components have unique and descriptive names.
Using descriptive and explicit names for the id parameter becomes more important as the app grows in complexity. This parameter is optional when there is no interactivity, but it becomes mandatory when there is. The following example snippet shows how easy it is to set the id parameter for a basic use case:
html.Div([html.Div(id='empty_space'),html.H2(id='h2_text'),dcc.Slider(id='slider'),])
Applying this to our current isolated app, we set a descriptive name to each id parameter.
app.layout = html.Div([dcc.Dropdown(id='color_dropdown',options=[{'label': color, 'value': color}for color in ['blue', 'green', 'yellow']]),html.Div(id='color_output')])
Our app is now complete from a layout perspective. The difference here is that we set values for the id parameter, and we’re running it in a Jupyter Notebook environment. Once we can identify components using their id parameter, we can determine which ones become Input and which ones become Output. By updating our conceptual diagram with the id values that we set, we can view the labels, as shown in the illustration below:
