Is there a better way to do this onclick to display the chosen value for custom tab on my custom navigation bar?

Custom Components
1

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.

streamlit-init-2022-04-01-06-04-58_Trim

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

2

All sorted! View component

3

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