The TabGroup component is used to allow the users to switch between views.
Import React and the TabGroup Component.
Define the tab group values and labels.
1
{ value: "1", label: "Capricorn" },
2
{ value: "2", label: "Aquarius" },
5
const TAB_GROUP_THREE = [
6
{ value: "1", label: "Capricorn" },
7
{ value: "2", label: "Aquarius" },
8
{ value: "3", label: "Pisces" },
Declare the TabGroup component.
0
class ExampleOne extends React.Component {
1
state = { exampleOne: "1" };
3
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
9
value={this.state.exampleOne}
10
option={TAB_GROUP_TWO}
11
onChange={this._handleChange}
17
class ExampleTwo extends React.Component {
18
state = { exampleTwo: "3" };
20
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
26
value={this.state.exampleTwo}
27
option={TAB_GROUP_THREE}
28
onChange={this._handleChange}