I’ve used one of the many example on this site to run a React custom component which returns values back to the Streamlit app. This works fine if the values are generated in the React app itself. When I tried to retrieve the values from a remote API, I’m unable to resolve the value from the fetch call. I can see the value being returned by the API in the network inspector, but it’s not being bound to the variable I’m passing back to Streamlit. If I run the React app outside the Streamlit component host, it works fine. There’s probably a sandbox issue here, but I don’t see any meaningful error messages, or can I find guidance on how to achieve my goal. (I know I can make the API call that React is making directly from Streamlit, but that’d be working around the issue for my case).
Below is the React effect in my code (and there are more details in this post). The /api/ping end point is running on a different port and I use the React package.json proxy flag to forward the request:
Any guidance would be much appreciated. Thanks.