Callbacks for dynamically added elements

Dash Python
1

Hey there,

I want to dynamically add elements in my dash app. A simplified example would be a number input and depending on the value I want to add as many elements / divs to another div.
I can do that quite easily and also give them unique ids because I generate them in a loop but how can I write callbacks for those elements?
The only solution I came to was to write the same callback like 10 times because I know I don’t want to add more than 10 elements and use the generic ids like this:
@dash.app.callback(Output(‘x’, ‘children’), [Input(‘generic-id-1’, 'children)]) …
@dash.app.callback(Output(‘x’, ‘children’), [Input(‘generic-id-2’, 'children)]) …
@dash.app.callback(Output(‘x’, ‘children’), [Input(‘generic-id-3’, 'children)]) …
…
all those callbacks call the same function.

Is there a better way of doing this?

2

If the output is the same for all 10, just create one callback with all 10 inputs: Keep in mind that Output('x', 'children') can only be assoc. with one callback.

You can use dash.callback_context to determine which input was triggered, should that level of detail be necessary.

@dash.app.callback(
    Output('x', 'children'), 
    [Input('generic-id-1', 'children'),
     Input('generic-id-2', 'children'),
     ...]