State and st.empty()

🎈 Using Streamlit
1

Hi!
I am building a seemingly simple app that shows an image, a few forms to fill, and a submit button.
When this button is fired, the forms need to be “submitted” (say, printed out), flushed, and a new image should be displayed in place of the main one - and that is until I run out of the full list of images (or else).

I understand that in order to do so, app should keep some sort of state (e.g. image in a list to use) and I am using
I am currently trying to do so using State “hack” from here.
However, while it works with simple st.image, st.text_area, it stops (button is not triggered) once I start to use st.empty() (either that or i cant find any changes).

Here is how the app looks like overall:


def work(state):
    

    # user = st.sidebar.text_input('user', 'PhilippK')
    user = 'test'

    HeaderPos = st.empty()
    imageLocation = st.empty()
    textLocation = st.empty()
    # buttonLocation = st.empty()

    HeaderPos.header(f'Example {state.position}')
    url, example_id = state.data.iloc[state.position]['s3_path'], state.data.iloc[state.position]['id']
    _update_img(url, imageLocation, f'example-{example_id}')

    output = textLocation.text_area('Dimentions', key=f'example-{state.position}')
    
    if st.button('submit', key=f'submit-{state.position}'):
        print(f'Button fired: {state.position}')
        # st.json({'user':user, 'listing':example_id, 'output':output})
        
        state.position += 1
        st.text(state.position)
        
        url, example_id = state.data.iloc[state.position]['s3_path'], state.data.iloc[state.position]['id']
        print(f'updating url={url}, listing={example_id}')
        
        HeaderPos.header(f'Example {state.position}')
        _update_img(url, imageLocation, example_id)
        output = textLocation.text_area('Dimentions', key=f'example-{state.position}')
1 Like