Navigate between tabs on click of button react-tabs

Question

Hi everyone i am new in react and javascript.

on click of the button want to move to next tab and last tab should be submit. dependency used is "https://www.npmjs.com/package/react-tabs".

Any help could be appreciated. Please take a look on the code below for more details.

<Tabs>
    <TabList>
      <CustomTab>Custom Tab 1</CustomTab>
      <CustomTab>Custom Tab 2</CustomTab>
    </TabList>
    <TabPanel>Panel 1</TabPanel>
    <TabPanel>Panel 2</TabPanel>
  </Tabs>
<button>prev tab</button>
<button>next tab</button>

Thanks in advance for your help.

Answer 1

to use a custom Tab in react-tabs you have to set its tabsRole.

CustomTab.tabsRole = 'Tab';

and should be passed to all other props :

const CustomTab = ({ children, ...otherProps }): ReactTabsFunctionComponent<TabProps> => (
  <Tab {...otherProps}>
    <h1>{children}</h1>
  </Tab>
);

a sample example in your case :

import * as React from "react";
import { Tabs, TabList, Tab, TabPanel } from "react-tabs";
import type { ReactTabsFunctionComponent, TabProps } from "react-tabs";

const CustomTab = ({
  children,
  ...otherProps
}): ReactTabsFunctionComponent<TabProps> => (
  <Tab {...otherProps}>
    <h1>{children}</h1>
  </Tab>
);

CustomTab.tabsRole = "Tab";
function App() {
  return (
    <div>
      <Tabs>
        <TabList>
          <CustomTab>Custom Tab 1</CustomTab>
          <CustomTab>Custom Tab 2</CustomTab>
        </TabList>
        <TabPanel>Panel 1</TabPanel>
        <TabPanel>Panel 2</TabPanel>
      </Tabs>
      <button>prev tab</button>
      <button>next tab</button>
    </div>
  );
}

export default App;

check the docs for more details