How to create dynamically generated components that can be identified in a callback

Dash Python
1

I need to make a dynamic “list” (generates based on an input box), but the dynamic list items must be able to be identified when clicked. I use the word “list” but it could be div’s or any other html element that can be stacked on top of one another.

I know there is no shortage of dynamic callback questions, but this one is different because the list items are generated dynamically, yet they must all be in a callback as an input. Generating the items was no issue, but when I tried creating a callback based on those list items(see below), I ended up getting a console error which mentioned that the callback had an invalid input so that is where I got stumped.

@app.callback(Output('test_out', 'children'),
              [
                  Input(f'list-item-{key}', 'n_clicks') for key in keys
              ])
def cb_function(*args):
     # determine the input that got triggered
     ctx = dash.callback_context
     list_item = ctx.triggered['id']
     # remaining code that works with that input follows

I also think that this may call for a custom react component, but I’d like to leave that as a last resort since I’m the sole dev on this project and creating a javascript environment adds more overhead.

2

My solution here was to use the tabs components, but in all the unintended ways :laughing: I’m hoping this holds up :pray:

The only things I did noticed is that I have to explicitly give the tabs component a value=None and this needs to also be updated whenever the options (tabs in this case) are dynamically re-populated.

That said, I feel this is a major gap in the dash-core-component suite in terms of making powerful dashboards. That is, on a general level, there is no component that provides context to the n_click and n_timestamp of it’s children. The closest thing we have would be radio and checkboxes, but those are not pure containers in the sense that they cannot be styled whichever way you like.

I’ll also submit this as a feature request and link back for context. Hopefully this gets on the docket as I think it will be a valuable add on and would solve many similar community posts. Here are just a few that stuck out: