Tab switching about react-bulma-components

[thebpmgroup]

I came up with this which works but is quite long winded

interface ITabState {
    schemas: boolean;
    responses: boolean;
}

type TabKeys = keyof ITabState;

const Components = (props: IComponents) => {
    const [tabState, setTabState] = useState({
        schemas: true,
        responses: false,
    } as Record<TabKeys,boolean>);

    const onTabClick = (e:React.FormEvent<HTMLAnchorElement>) => {
        const { id } = e.currentTarget;
        Object.keys(tabState).forEach(i => {
            i!=id ? setTabState(prevState => ({
                ...prevState,
                [i]: false
            })) :
            setTabState(prevState => ({
                ...prevState,
                [i]: true
            }))
        });
    }
    
    return (
        <Container>
            <Tabs>
                <Tabs.Tab  
                    onClick={onTabClick}
                    id='schemas'
                    active={tabState.schemas}
                >
                    Schemas
                </Tabs.Tab>
                <Tabs.Tab
                    onClick={onTabClick}
                    id='responses'
                    active={tabState.responses}
                >
                    Responses
                </Tabs.Tab>

[couds]

Hi, you need to handle the state on your end, something similar of what you did. but you can simplify it a little like this

const Component = {
  const [activeTab, setActiveTab] = useState('schemas');
  const changeTab = ({ target }) => setActiveTab(target.id)
  return (
    <Tabs>
      <Tabs.Tab id="schemas" active={activeTab === 'schemas'} onClick={changeTab}>Schemas</Tabs.Tab>
      <Tabs.Tab id="responses" active={activeTab === 'responses'} onClick={changeTab}>Response</Tabs.Tab>
    </Tabs>
  )
}