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.
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.
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
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.
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.
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.
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?
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.
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!