import { Tab, TabPanel, Tabs } from '@bsonntag/react-tabs';
import React, { Component } from 'react';

class App extends Component {

  state = {
    selectedTab: 0
  };

  handleSelect = selectedTab => this.setState({ selectedTab });

  render() {
    return (
      <Tabs
        onSelect={this.handleSelect}
        selectedTab={this.state.selectedTab}
      >
        <ul>
          <Tab tab={0}>
            {({ select }) => (
              <li onClick={select}>
                {'First tab'}
              </li>
            )}
          </Tab>

          <Tab tab={1}>
            {({ select }) => (
              <li onClick={select}>
                {'Second tab'}
              </li>
            )}
          </Tab>
        </ul>

        <TabPanel tab={0}>
          {isSelected => isSelected && (
            <div>
              {'First tab content'}
            </div>
          )}
        </TabPanel>

        <TabPanel tab={1}>
          {isSelected => isSelected && (
            <div>
              {'Second tab content'}
            </div>
          )}
        </TabPanel>
      </Tabs>
    );
  }

}