I am currently building a custom tab for my custom navigation bar which I created using css. The issue is when I click on a selected option, at times, it does not execute and stays stuck on the previous option. I have included a gif to showcase this.
Is there a way to improve this code?
Frontend code:
> interface State {`
>
> navLabel: string|number
>
> }
>
> class MyComponent extends StreamlitComponentBase<State> {
>
> public state = {navLabel: ""}
>
> public render = (): ReactNode => {
>
> const labelName = this.props.args["name"]
>
> const iconName = this.props.args["iconName"]
>
> const { theme } = this.props
>
> const styles: React.CSSProperties = {}
>
> return (
>
> <div className="navtab" onClick={this.onClicked}>
>
> <div className="content" tabIndex={tabIndex}>
>
> <input type="radio" name="indicator" id="input-data"/>
>
> <div className="list">
>
> <label htmlFor="input-data" className="input-data">
>
> <span><i className="material-icons">{iconName}</i></span>
>
> {/* <span className="space"> </span> */}
>
> <span className="text-display">{labelName}</span>
>
> </label>
>
> </div>
>
> </div>
>
> </div>
>
>
> )
>
> }
>
> private onClicked = (): void => {
>
> this.setState(
>
> prevState => ({navLabel: this.props.args["name"]}),
>
> () => Streamlit.setComponentValue(this.state.navLabel)
>
> )
>
> }
Python code:
> import streamlit as st
> import streamlit.components.v1 as components
> _component_func = components.declare_component(
>
> "my_component",
>
> url="http://localhost:3002",
>
> )
>
> def my_component(name, iconName, tabIndex, key=None):
>
> component_value = _component_func(name=name, iconName=iconName, key=key, default='Option')
>
> return component_value
>
> with st.sidebar:
>
> test = my_component(name='Dashboard', iconName='dashboard')
>
> test_2 = my_component(name='Data Analysis', iconName='insights')
>
> test_3 = my_component(name='Testing', iconName='business')
>
>
>
> if test == 'Dashboard':
>
> st.title("Dashboard")
>
> st.write('Name of option is {}'.format(test))
>
> elif test_2 == 'Data Analysis':
>
> st.title("Data Analysis")
>
> st.write('Name of option is {}'.format(test_2))
>
> elif test_3 == "Testing":
>
> st.title("Third one")
>
> st.write('Name of option is {}'.format(test_3))
Thanks