Dash Syntax / inputs and outputs

Dash Python
1

Hi, so disclaimer - very new to dah and just learning. I am following the app call back docs.

I want to have three empty boxes, two boxes where a user puts input, and the third box will output the result. I have managed two input boxes but there is an error saying :

“TypeError: update_output_div() takes 1 positional argument but 2 were given”

Im guessting i have to add another input into the argument of the method. But no idea what to put. Here is my good so far/ its copied and tweaked from the docs.

from dash import Dash, dcc, html, Input, Output

app = Dash(__name__)

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-input1', value='initial value', type='text')
    ]),
       html.Div([
        "Input: ",
        dcc.Input(id='my-input2', 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-input1', component_property='value'),
    Input(component_id='my-input2', component_property='value'),

    
)
def update_output_div(input_value):
    return f'Output: {input_value}'


if __name__ == '__main__':
    app.run_server(debug=True)

Here is the output;

input
input1881×385 14.6 KB

Thanks for any help.

2

Hey @FREDDY33,

Change this to this:

def update_output_div(input_value, input_value2):
    return f'Output: {input_value}'

You are calling the function and passing it two variables when it is only setup to handle one. Dont know what else you want to do with input_value2.

3

hey! thanks for the help (again). That worked. But still trying to wrap my head around this.

I know this is a function but what is this? (input_value, input_value2): does it get the values of the first two inputs in the code?
then the output returns it?

4

So, when you setup a callback, you are telling all the variables that you are going to be using and returning. The function is placed immediately below it, and will be called with whatever variables you set up, in the order that you setup:

Listed outputs (requires a list response):

@app.callback([Output('test', 'children'), Output('test2','children')], [Input('thisButton','n_clicks')])
def pushedButton(n1):
     if n1 > 0:
          return ['this is pushed','roger roger']

Inputs and States are used in the function:

@app.callback([Output('test', 'children')], [Input('thisButton','n_clicks'), State('thisButton','children')])
def pushedButton(n1, words):
     if n1 > 0:
          return [', '.join([words]*3)]
     return ['']

note: Even with a list of just 1 output, you have to respond with a list.

1 Like
5

Right that makes sense thank you! I think i may have to revisit the basics of python, because functions are really proving to be tricky here.

1 Like