Sub-indexing pattern matching callbacks


I have an indexing-related question for pattern-matching callbacks.

Is there a way to create a sub-index for components?

I have dynamic cards triggered by a button (“Add an Audience Attribute”) which sets the index of the card and all it’s components to n_clicks of this button.

This card has a dynamic button (“Search All Questions”) that triggers a dropdown.

Currently, due to indexing issues I limit n_clicks on the “Search All Questions” button to one. And if I click “Add an Audience Attribute” again, I have another card with the same setup.

In the above screenshot, the first dropdown has index=1 and the second one has index=2.

I would like to create either a “sub-index” or a new indexing system where I can create an indefinite amount of dropdowns triggered by the “Search All Questions” button in each card and keep track of their indices.

Has anyone explored this sub-indexing/nested indexing or have any workarounds?

Thanks in advance!

Hey @vdemchenko welcome to the forums.

I played around with using strings as index instead of integers a while ago.

Something like this:

html.Div(id={'type': 'div', 'index': f'{major}-{minor}'}

I had to parse the index in the callback afterwards if using the ALL wildcard. If using MATCH there is no difference between using a integer or string as index.

I also played around with parsing the type instead of the index:

html.Div(id={'type': f'div-{major}', 'index': minor}

But either of these is quite cumbersome.

Here an MRE using the first option:

Obviously you would have to update the lookup if creating components dynamically.


Hi @AIMPED thanks for your reply! I’ll look into using this approach of using strings as opposed to ints. I vaguely recall attempting that to no avail, but this looks like a cleaner way than what I had before.

1 Like