"react-tabs" is there any way to get the text of the active tab (or set a name/indicator for tabs and get that?)

Question

I am using the react-tab package.

I have defined my page like

<Tabs>
        <TabList>
          <Tab>Gen Problem Solving</Tab> {/* (problem_s) */}
          <Tab>Spec Balances Problem</Tab> {/* (spec_strat_balan_s) */}
          <Tab>Gen Moments</Tab> {/* (mom_s) */}
          <Tab>Spec Moments</Tab> {/* (spec_mom_s) */}
          <Tab>Gen Gravity</Tab> {/* (gravity_s) */}
          <Tab>Spec Gravity</Tab> {/* (spec_gravity_s) */}
        </TabList>

        <TabPanel>
          <p>
            problem_s - remove this
          </p>        
        </TabPanel>
        <TabPanel>
          <p>
            spec_strat_balan_s
          </p>
        </TabPanel>        

        <TabPanel>
          <p>
            mom_s
          </p>
        </TabPanel>

        <TabPanel>
          <p>
            spec_mom_s
          </p>
        </TabPanel>

        <TabPanel>
          <p>
            gravity_s
          </p>
        </TabPanel>

        <TabPanel>
          <p>
            spec_gravity_s
          </p>
        </TabPanel>                                
      </Tabs>

but I wonder if it is possible to "name" a tab and then get the name of that tab when it is active? I can't see anything like this in the docs

Answer 1

You can do this.

1. By adding a key to certain tab and when its active <Tab key={activeTab}>Gen Problem Solving</Tab> and use useState to identify a unique tab, const [activeTab, setActiveTab] = useState("your_default_active_tab") and attach a listener to tabs, so if its clicked, you change it to, setActiveTab("clicked_tab").

2. Was just going through react tabs, instead of onClick , use can use, focusTabOnClick and pass state accordingly .