Hide "Button B" with "Button A", without clicking twice

Using Streamlit
1

Summary

I am getting familiar using streamlit (and therefore with session states). I have a small app, consisting of a “Button A”, that enables a small text, and a “Button B”. Using “Button B”, I want to hide the small text and “Button B” itself, at the first click. So far, I can achieve this, but clicking twice on “Button B”; I should only click it once.

Steps to reproduce

Code snippet:

import streamlit as st

if 'display_result' not in st.session_state:
    st.session_state.display_result = False
if 'reset' not in st.session_state:
    st.session_state.reset = False

st.header("My Demo App")
result="My Custom Text"

button_a = st.button('Button A')
if button_a :
    st.session_state.display_result = True

if st.session_state.display_result:
    st.write(result)
    button_b = st.button('Button B')
    if button_b:
        st.session_state.reset = True

if st.session_state.reset:
    st.session_state.display_result=False
    st.session_state.reset=False

No additional steps are needed, just run the previous code snippet.

Expected behavior:

To display result and Button B when Button A is clicked, and to hide result and Button B when Button B is clicked. Any button should be clicked ONCE to get the corresponding action.

Actual behavior:

result and Button B are displayed when Button A is clicked ONCE (this is OK), BUT they get hidden when Button B is clicked TWICE (this is not OK).

Debug info

  • Streamlit version: 1.22.0
  • Python version: 3.10.6
  • Using PipEnv (Pip version 23.1.2)
  • OS version: Linux Mint 21.1 Vera
  • Browser version: Mozilla Firefox for Linux Mint-001, version 112.0.2 (64 bit)

Requirements file

Not needed, the script only uses aforementioned Streamlit version.

Links

Does not apply.

Additional information

Does not apply.

2

Hi @dave-espinosa, is this what you need?

import streamlit as st

if 'display_result' not in st.session_state:
    st.session_state.display_result = False
if 'reset' not in st.session_state:
    st.session_state.reset = False

st.header("My Demo App")
result="My Custom Text"

def btn_b_callback():
    st.session_state.display_result=False
    st.session_state.reset=False
    
button_a = st.button('Button A')
if button_a :
    st.session_state.display_result = True

if st.session_state.display_result:
    st.write(result)
    button_b = st.button('Button B', on_click=btn_b_callback)

Cheers

3

Hello @Shawn_Pereira , hope you are doing fine.

Indeed your proposal worked as expected, but now I am curious:

  • Why my original implementation did not work?
  • Why calling a callback seems to stabilize results?

Thank you very much in advance!

4

Hi @dave-espinosa, there are 2 things you need to be clear about:

  1. How the button widget operates &
  2. Session states

So besides the Streamlit documentation, also have a look at this excellent tutorial (10 most common explanations on the Streamlit forum) by @mathcatsand.

Cheers

2 Likes
5

Hello @Shawn_Pereira ,

Thanks a lot, I will be checking them out!

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.