Need a button with a label that changes with each click
I am not sure if this is a solara question, or a vue issue. I need a button that switches between 2 values (OFF/ON) and also shows the value (text) in the button label field.
I think I have a solution in https://py.cafe/rob.on.lists/solara-interactive-toggles
However... some of the clicks do make the switch change value, some of the clicks are seemingly ignored.
Also, I need more than one button, and enabling the 2nd button makes me wonder if the reactive id is passed by name, or by reference. Because sometimes when I press the right button, the left value changes.
13 Replies
Hey @rob-vh! I think
uitaan needs to use use_reactive and not reactive, since you are using it inside a component. For me your example works consistently after that change. I'm surprised you don't get an error when using reactive, actually.Thank you @lisakki, I replaced the reactive references inside the component to use_reactive in https://py.cafe/rob.on.lists/solara-switch-button-interaction
The uitaan button influences the value in linksrechts when you press it repeatedly.
Also, at startup, before I press a button, the initial value I set in the Page component does not show up in the Markdown output.
Note, I'm trying to use the name space of the SwitchButton component to keep the 2 buttons separated, but I do not know if use_reactive also uses separate namespaces.
And regarding my initial attempt with reactive, instead of use_reactive, there was no error message, just spotty behavior.
Adding some print() commands I verified:
- use_state() defined in the button is specific for the button
- the uitaan.value that I display in the Page() element does not follow the switchButton related to uitaan, you click the left button, sometimes the value for the right button changes
Indeed,
use_reactive and use_state are scoped to the component within which they are defined, and create a new instance of themselves for each intance of that component.
I'm not able to reproduce either of the issues you mention here (the value of the other non-clicked button changing, and the initial value not being respected). Let me know if there are any specific steps I should take to reproduce them.I also found that my observation of the initial state changed after I re-ran.
How did you re-run the script? On hot reload we attempt to preserve state.
ok, I am going to be VERY CAREFULLY rerun my steps, keeping in mind your last comment.
Also, did you maybe forget to push your changes to https://py.cafe/rob.on.lists/solara-switch-button-interaction ? I still see
uitaan and linksrechts being defined using solara.reactive rather than solara.use_reactiveoh, no, I am doing my typing on my local instance
Ah I see. No worries as long as you're using the
use_ hooks within componentscan you just point me to documentation (or tell me from your memory) if it is possible to retrieve the click count from the ButtonClick instance (https://solara.dev/documentation/api/hooks/use_state) in a python var in the Page() element?
@Iisakki Rotko I am getting more confused 😉
I updated https://py.cafe/rob.on.lists/solara-switch-button-interaction and have the value from my button(s) now accessible in the Page() element. But I notice that the python code in SwitchButton's body gets accessed way more frequently than I expected, the body (with parameter processing) gets called very time I press the button, not just the on_click function. OK... I think I can deal with that 🤨
But I do not understand why the first click on the button is ineffective? I initialize the value to 0 (uit) I click on the UIT value and it does not change to AAN. Only the 2nd click changes it.
Note: I use reactive to set the global switch fields, and use_state for display/click processing.
I've simplified handling of the state variables now that I better understand that the body of the elements is executed several times when a click occurs, and the use_state hook has logic to deal with multiple invocations. If only I had read this https://solara.dev/documentation/advanced/understanding/anatomy first.
The anatomy of Solara's functionality
Dive deep into how Solara uses the technologies it builds on.
I ended up setting the reactive value after rebuilding the button in the body of the element using the use_state value, instead of within the event handler.
I would love seeing this sample https://py.cafe/rob.on.lists/solara-switch-button-interaction improved, e.g., with a class for reactive_value, instead of a generator function.