<div id="root"></div>
const root = document.querySelector('#root');

class UsingTabs extends React.Component {
  constructor() {
    super();
    this.state = { active: 0 };
  }
  
  doSomething(event) {
    console.log(event.detail.active);
    this.setState({ active: event.detail.active});
  }
  
  componentDidMount() {
    this.element
      .addEventListener('change', this.doSomething.bind(this));
  }

  render() {
    return (
      <div>
        <p>Selected tab is {this.state.active}</p>
        <amber-tabs
          ref={(element) => { this.element = element; }} 
          active={this.state.active}
          labels="One, Two"
        ></amber-tabs>
      </div>
    );
  }
}

ReactDOM.render(<UsingTabs />, root);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0/umd/react-dom.production.min.js
  3. https://unpkg.com/@amber-ds/components@1.0.0/tabs.js