# Dynamic callback inputs\\states

**URL:** <https://community.plotly.com/t/dynamic-callback-inputs-states/77278>\
**Category:** Dash Python\
**Created:** [July 30, 2023, 11:24am UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278 "2023-07-30T11:24:31Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![amihaio](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@amihaio](https://community.plotly.com/u/amihaio)\
**Post date:** [July 30, 2023, 11:24am UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/1 "2023-07-30T11:24:31Z")

</div>

Hey there,

In my app, I can change the components in it via callbacks. For example I have a radio group with two options, such that selecting `option1` will create components `group1` and selecting `option2` will create components `group2`. The created group is passed as children to a div, having it displayed on screen. Only one component group exists (as far as the app is concerned) at any given moment.  
In the end I want to take all the selections the user made into a callback to do something with them. The problem is that I need to have as States all possible component groups which is a problem since only one group exists at a given time.  
My current solution is to have all groups exist as children of the div at all times, and switch between them on screen via changing the `display` prop of the style param. This is some what hacky so I was wondering is there’s a better way to solve this.

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 30, 2023, 1:12pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/2 "2023-07-30T13:12:53Z")

</div>

Hi @amihaio  
If I understand your goal, you need to use a dcc.Store component to store the user selections.  
In the callback add a state of the dcc.store ‘data’ and the dcc.store ‘data’ as an output, adding in the callback the current user selection before sending it back.

> **[Store | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/store)**
>
> Store

---

<div class="post-metadata">

**Author:** ![amihaio](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@amihaio](https://community.plotly.com/u/amihaio)\
**Post date:** [July 30, 2023, 1:34pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/3 "2023-07-30T13:34:43Z")

</div>

Thanks!  
Interesting idea. This does make the callback dynamic since I don’t need to state each user input individually. The downside is that I now need to create a callback for each input to add the selected value to the Store. Currently I don’t need to do that since I can just access the prop of the inputs I need. Might be worth it though 🙂

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 30, 2023, 1:38pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/4 "2023-07-30T13:38:49Z")

</div>

Sorry, I do not understand the downside explanation.  
I understand that every time the user make a selection it triggers a callback, you only need to add the state and the output of the dcc.Store to this callback.

---

<div class="post-metadata">

**Author:** ![amihaio](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@amihaio](https://community.plotly.com/u/amihaio)\
**Post date:** [July 30, 2023, 1:49pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/5 "2023-07-30T13:49:16Z")

</div>

Sorry I guess I didn’t explain well.  
There isn’t a callback for each input. There are many inputs which need to be fed into the final callback that does something with all of them. The problem is that there are pairs of inputs where only one exists at a time. For example an input category where the user can split the data into train\val\test via dates or via percent of data (e.g. 70%\15%\15%). Each one of these has its own set of components (date picker for the former and slider for the latter). Only one set of components can exist at any given moment since there is a dropdown switching between them.  
This is a problem since the final callback needs to state both sets of components, while some of them don’t exist.

Your idea of using the Store can solve this since I won’t need to explicitly state all the components in the callback decorator, though I’ll need to create a callback for each component to add its value to the Store.

Does this make more sense? 🙃

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 30, 2023, 1:57pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/6 "2023-07-30T13:57:08Z")

</div>

Its not possible to use a dcc.Store for each selection?  
If I understand correctly all the selections are a sequence of previous choices, if you have a dcc.Store for each step then you can know all the selections the user did at the end of the process with a callback that takes the data of each dcc.Store.

---

<div class="post-metadata">

**Author:** ![amihaio](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@amihaio](https://community.plotly.com/u/amihaio)\
**Post date:** [July 30, 2023, 2:07pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/7 "2023-07-30T14:07:55Z")

</div>

actually they are mostly independent, there a few inputs that have multiple “versions” (as in the data split type I mentioned previously). I think though that using the store, is better since I don’t need to keep track of so many inputs into the final callback, especially since the order they are listed matters.  
In this case, what would be the easiest way to add component values to a store. Is there a programatic way to create callbacks?

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [July 30, 2023, 2:16pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/8 "2023-07-30T14:16:43Z")

</div>

But it doesn’t matter If they are independent, you just need to have one dcc.Store for each radio item, then you will store each selection made by the user.

---

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [July 30, 2023, 3:05pm UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/9 "2023-07-30T15:05:09Z")

</div>

Have you looked at pattern matching callbacks? It seems like a good fit for your problem,

> **[Pattern-Matching Callbacks | Dash for Python Documentation | Plotly](https://dash.plotly.com/pattern-matching-callbacks)**
>
> The pattern-matching callback selectors \`MATCH\`, \`ALL\`, & \`ALLSMALLER\` allow you to write callbacks that respond to or update an arbitrary or dynamic number of components.

---

<div class="post-metadata">

**Author:** ![amihaio](https://avatars.discourse-cdn.com/v4/letter/a/4af34b/32.png) [@amihaio](https://community.plotly.com/u/amihaio)\
**Post date:** [July 31, 2023, 11:05am UTC](https://community.plotly.com/t/dynamic-callback-inputs-states/77278/10 "2023-07-31T11:05:45Z")

</div>

Yep, you’re right! I can use pattern matching. I use pattern matching when I programmatically create components, but this isn’t the case here so I haven’t thought about it. Thanks!
