S
Solara•2mo ago
Ben Epstein

Am I missing something simple? How do I

Am I missing something simple? How do I get a button whose value changes when the button is clicked 
value = sl.reactive(True)
sl.Button(label="Hi" if value.value else "Bye", on_click=lambda: value.set(not value.value))
value = sl.reactive(True)
sl.Button(label="Hi" if value.value else "Bye", on_click=lambda: value.set(not value.value))
why doesn't this work?
8 Replies
Ben Epstein
Ben EpsteinOP•2mo ago
hhmmm @MaartenBreddels @iisakkirotko it only works if i do sl.use_reactive -- why is that?
Elder Millenial
Elder Millenial•2mo ago
I think I ran into something similar. I think it has to do with how context is being handled. Maybe related: https://discord.com/channels/1106593685241614489/1106593686223069309/1235916338086543380 What if you modified to do this? 
value = sl.reactive(True)
sl.Button(label="Hi" if value.value else "Bye", on_click=lambda x=value.value: value.set(not x))
value = sl.reactive(True)
sl.Button(label="Hi" if value.value else "Bye", on_click=lambda x=value.value: value.set(not x))
Ben Epstein
Ben EpsteinOP•2mo ago
same thing weirdly.. BUT it does work if I define the reactive outside of hte component so * sl.reactive inside component: does not work * sl.reactive outside the component: works * sl.use_reactive inside the component: works
pikaa
pikaa•2mo ago
each rerender is likely redefining the global reactive, so it sets it to true each time
pikaa
pikaa•2mo ago
try this and you can see that it just resets it, dont know if that's intended though pycafe here 
import solara as sl

outervalue = sl.reactive(True)


@sl.component
def GoodButton():
    print("rerender on goodbutton triggered, value is currently",
          outervalue.value)
    sl.Button(
        label="Hi" if outervalue.value else "Bye",
        on_click=lambda x=outervalue.value: outervalue.set(not x),
    )
    return


@sl.component
def BadButton():
    value = sl.reactive(True)
    print("rerender on badbutton triggered, value is currently", value.value)
    return sl.Button(
        label="Hi" if value.value else "Bye",
        on_click=lambda x=value.value: value.set(not x),
    )


@sl.component
def Page():
    GoodButton()
    BadButton()


if __name__ == "__main__":
    Page()
import solara as sl

outervalue = sl.reactive(True)


@sl.component
def GoodButton():
    print("rerender on goodbutton triggered, value is currently",
          outervalue.value)
    sl.Button(
        label="Hi" if outervalue.value else "Bye",
        on_click=lambda x=outervalue.value: outervalue.set(not x),
    )
    return


@sl.component
def BadButton():
    value = sl.reactive(True)
    print("rerender on badbutton triggered, value is currently", value.value)
    return sl.Button(
        label="Hi" if value.value else "Bye",
        on_click=lambda x=value.value: value.set(not x),
    )


@sl.component
def Page():
    GoodButton()
    BadButton()


if __name__ == "__main__":
    Page()
PyCafe
Playground for Python web frameworks. Run and edit Python code snippets for web frameworks in a web browser.
iisakkirotko
iisakkirotko•2mo ago
Where are you defining the reactive variable? solara.reactive should only be used at global context, within components you should use solara.use_reactive instead.
Ben Epstein
Ben EpsteinOP•2mo ago
I think this would be a good example to add to the documentation, as it's not clear that this would happen
iisakkirotko
iisakkirotko•2mo ago
Yeah, I think this is another thing in the docs that is mentioned kind of off-hand. Maybe we could write a more in-depth piece on our reactivity system? We'll see in the new year :)

Did you find this page helpful?