//using "react-web-tabs" library
import React, { Component } from "react";
import { render } from "react-dom";
import { Tabs, Tab, TabPanel, TabList } from "react-web-tabs";
class Tabs extends Component {
state = {
selectedTab: "1"
};
test = () =>{
this.setState({ selectedTab: "2" });
}
test1 = () =>{
this.setState({ selectedTab: "3" });
}
test2 = () =>{
this.setState({ selectedTab: "1" });
}
render() {
return (
<Tabs defaultTab={this.state.selectedTab}>
<TabList>
<Tab tabFor="1">Tab 1</Tab>
<Tab tabFor="2">Tab 2</Tab>
<Tab tabFor="3">Tab 3</Tab>
</TabList>
<TabPanel tabId="1">
<button onClick={this.test}> move to tab 2</button>
</TabPanel>
<TabPanel tabId="2">
<button onClick={this.test1}> move to tab 3</button>
</TabPanel>
<TabPanel tabId="3">
<button onClick={this.test2}> move to tab 1</button>
</TabPanel>
</Tabs>
);
}
