How to handle dynamic created input fields

I’m trying to interact with with dynamic created input fields which are created when changes in radioitems, however, when I try to interact with these variables later as a State, I always get the following error:

“A nonexistent object was used in an State of a Dash callback. The id of this object is Montréal and the property is value.”

I have created this reproducible example:

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
from dash.exceptions import PreventUpdate

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

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

all_options = {
    'America': ['New York City', 'San Francisco', 'Cincinnati'],
    'Canada': [u'Montréal', 'Toronto', 'Ottawa']
}


def generate_inputs(shortName):
    return dbc.Input(id=str(shortName),
                     placeholder=str(shortName),
                     type='text',
                     style={"margin-bottom": "5px"})


app.layout = html.Div([
    dcc.RadioItems(
        id='countries-radio',
        options=[{'label': k, 'value': k} for k in all_options.keys()],
        value='America'
    ),
    dbc.Button(id='btn-scrape',
                           children=["Download  ", html.I(className="fa fa-download mr-1")],
                           color="primary",
                           className="mt-1"
                           ),
    html.Hr(),

    html.Div(id='display-inputs', children=[generate_inputs(i) for i in all_options['America']]),

    html.Hr(),
    dbc.Col([
        dcc.Loading(
            id='loading-1',
            type='circle',
            children=[
                dash_table.DataTable(
                    id='datatable-paging',
                    data=[{}],
                    editable=True,
                    style_cell={
                        'whiteSpace': 'normal',
                        'lineHeight': 'auto',
                        'height': 'auto',
                        'fontSize': 12},
                    page_current=0,
                    page_size=10,
                    page_action='native'),
                dcc.Download(id='download-table')
            ]),
    ])
])

@app.callback(
    Output('display-inputs', 'children'),
    Input('countries-radio', 'value'),
)
def set_cities_children(scraping_setting):

    return dbc.Col(children=[generate_inputs(i) for i in all_options[scraping_setting]], className='placeholder')


'''
App callback: Scraping data from eurlex using the XmlScraper Class
'''
@app.callback(
    Output('datatable-paging', 'data'),
    [Input('btn-scrape', 'n_clicks')],
    [State('countries-radio', 'value'),
    State('New York City', 'value'),
    State('San Francisco', 'value'),
    State('Cincinnati', 'value'),
    State('Montréal', 'value'),
    State('Toronto', 'value'),
    State('Ottawa', 'value')]
)
def update_output(n_clicks, scraping_value, ny,sf,ci,mo,to,ot ):
    if n_clicks is None:
        raise PreventUpdate
    else:
        if 'America' in scraping_value:
            print(ny,sf,ci)

        elif 'Canada' in scraping_value:
            print(mo,to,ot)

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

3 posts - 2 participants

Read full topic