Dash Input, Output Component Property

user_14849198 0
Viewed 5458

Referring to documentation link as below:-

dash-plotly

In the documentation, component_property for the Input & Output callback is explained that:-

In Dash, the inputs and outputs of our application are simply the properties of a particular component. In this example, our input is the "value" property of the component that has the ID "my-input". Our output is the "children" property of the component with the ID "my-output

However in example code copied below, I can't find the component_property of value or children in the html skeleton. It is noted from the documentation that the children is omitted.

Q: how do I know if I have to specify value , children or some other component_property?

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

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div(["Input: ",
              dcc.Input(id='my-input', value='initial value', type='text')]),
    html.Br(),
    html.Div(id='my-output'),

])


@app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
    return 'Output: {}'.format(input_value)


if __name__ == '__main__':
    app.run_server(debug=True)
plotly-dash python
1 Answers

If you want to know whether you have to explicitly give a specific component_property when using a component, you will have to look at the documentation of that component. It should tell you which properties are mandatory and which are optional.

For most components, the majority of properties is optional. Look at the documentation for html.Div here for example. Sadly, this example also shows that the documentation is not always complete on this, as the properties n_clicks and n_clicks_timestamp are also optional but not listed so as of now. That makes all properties of the html.Div optional.

In practice, you will mostly explicitly list only the properties that you want to set to some initial value. If you should be missing any mandatory ones, Dash will throw an Exception.

Note that you can use any property as Input / Output / State of a callback, regardless of whether they are optional or not. They will exist with some default value even if you did not name them explicitly.

Regarding the example you gave, the component_property value is actually explicitly given in this line, you might have overlooked it:

dcc.Input(id='my-input', value='initial value', type='text')]),

It's the second argument to dcc.Input. The children property of the Output component is indeed not explicitly given in the layout. I added two working alternatives that include it below:

html.Div(id='my-output'),                # from the given example
# html.Div(children=[], id='my-output'), # explicitly give children property
# html.Div([], id='my-output'),          # name of the children argument may be dropped if it goes first

Note how the third way is also the one used in the other two html.Divs in your example.

user_147472390
Related