Rehydrating a Custom Component's inputs from `session_state`

Custom Components
,
1

Hi :wave:

How do I rehydrate user inputs within a custom component from session_state in a way where they are still editable?

Let’s take a custom my_component that has user editable inputs in it, whose values are saved to session_state with Streamlit.setComponentValue(value)

How do I properly pass that value back into the component (similarly to how native components like st.text_input would be from session_state)?

Here I’m trying to pass the value into the constructor when instantiating the component:

key = "key_0"
val = st.session_state.get(key, "")
returned_val = my_component(key=key, value=val)
if (returned_val): ut.update_query_params()

and that allows me to set the value of an input within my custom React component, for example:

<input key=key value=value />

With this technique, if the session_state value will correctly appear in the input BUT then I can’t actually type in the field because the component constantly redraws with every keystroke!

What is the correct pattern?!

Thank you!!! :raised_hands:

2

How is the component sending info back to python? For example, if you use onChange it might send a value back to python after every character which then changes a value on the streamlit side and might result in a new rerun. Something like onSubmit could work better.

I also sometimes seem to get raceconditions between iframe and streamlit which can be prevented with a setTimeout.