index.js

import React, { Children, PropTypes } from 'react';
import cssModules from 'react-css-modules';
import styles from './style.css';
import { omit } from 'lodash';

function makeLabel(child, index) {
  const { selected } = this.state;
  const onClick = () => this.setState({ selected: index });
  const styleName = index === selected ? 'tab-label-selected' : 'tab-label';
  return React.cloneElement(child.props.children[0], { onClick, styleName });
}

/**
 * Represents a set of tabs, with one tab active at a time, each corresponding to a unique section of content.
 */
export class Tabs extends React.Component {
  static propTypes = {
    children: PropTypes.node,
  };

  state = { selected: 0 };

  render() {
    const passthroughProps = omit(this.props, ['styles']);
    const { children } = this.props;
    const { selected } = this.state;
    const content = children[selected].props.children[1];

    return (
      <article styleName="wrapper" {...passthroughProps}>
        <header styleName="tab-labels">{Children.map(children, makeLabel, this)}</header>
        {content}
      </article>
    );
  }
}

export default cssModules(Tabs, styles);