Tabs View Source

import * as React from "react";

import { TabGroup } from "slate-react-system";

const TAB_GROUP_TWO = [

  { value: "1", label: "Capricorn" },

  { value: "2", label: "Aquarius" },

];

const TAB_GROUP_THREE = [

  { value: "1", label: "Capricorn" },

  { value: "2", label: "Aquarius" },

  { value: "3", label: "Pisces" },

];

class ExampleOne extends React.Component {

  state = { exampleOne: "1" };

  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });

  render() {

    return (

      <TabGroup

        name="exampleOne"

        value={this.state.exampleOne}

        option={TAB_GROUP_TWO}

        onChange={this._handleChange}

      />

    );

  }

}

class ExampleTwo extends React.Component {

  state = { exampleTwo: "3" };

  _handleChange = (e) => this.setState({ [e.target.name]: e.target.value });

  render() {

    return (

      <TabGroup

        name="exampleTwo"

        value={this.state.exampleTwo}

        option={TAB_GROUP_THREE}

        onChange={this._handleChange}

      />

    );

  }

}