Why doesn't the div content update?

Dash Python
1

I tried using a div containing various elements with which the user can interact and then pass the entire div element as a State to a function to be able to read all of the various inputs.

However, it seems that the div isn’t getting updated. I wrote a small programme which shows the problem below:

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


app = dash.Dash(__name__)                                                       
app.css.append_css({                                                            
    'external_url': ('https://stackpath.bootstrapcdn.com/'                      
                     'bootstrap/4.1.1/css/bootstrap.min.css')                   
    })                                                                          


app.layout = html.Div(                                                          
    className='container-fluid',                                                
    children=[                                                                  
        html.Div(id='test', children=[                                          
            html.Button(id='btn', children='Press me'),                         
            dcc.Input(id='inp', value='asdf')                                   
        ]),                                                                     
        html.Div(id='out')]                                                     
)                                                                               


@app.callback(                                                                  
    Output('out', 'children'),                                                  
    [Input('btn', 'n_clicks')],                                                 
    [State('test', 'children')]                                                 
)                                                                                  
def update(n, div):                                                                
    print(div)                                                                     


app.run_server(debug=True, port=8888)

I know that in this simple case I could just have the State depend on the value property of the id=‘inp’ however each of these is generated dynamically so I thought I’d create whatever I create in the div and then pass the div and parse it (which I have code for). The only problem is I can’t get the div to update!

2

Hi

Your callback is PRINTING the ‘div’ in the console. But the function doesn’t return anything. You want it to RETURN the value instead. Simply change print(div) to return div and you should be set.
print is equivalent to “show me what it is” while return is equivalent to “send me so I can use it”

I’m not at home so I can’t test but you might have another issue. In this example, you take the children from TEST and put them in OUT. But since the children from TEST have ids, you might end up with the same ids in TEST, which might cause an error.

3

I’m printing on purpose to see if the div contains the altered input field.

Ie if I type “hello” in the input field I would expect to see “hello” as part of the div but I don’t.

The printing also makes it easy to not worry about what you just mentioned re IDs in this toy example

4

I got home and tried out your code
Here’s what happened:

If I use State(‘test’, ‘children’), the dcc.Input value taken is the initial one, regardless of what I typed in it
If I use State(‘inp’, ‘value’), the dcc.Input value taken is the updated one (the one currently visible on screen)

It seems you cannot get the current value of an Input in a callback if you call its container. You need to call the input directly with State. However, I’m fairly new to dash, so hopefully someone else might be able to clear things up

5

Yup had the exact same observation. Because I generate the input in the actual case dynamically I though getting the children of the parent would be a nice workaround