Tab.js

import React, {Component} from 'react';

class Tabs extends Component {

    static get defaultProps() {
        return {
            onTabChange: () => {}}
        ;
    }

    componentWillMount() {
        this.state = {
            openTabIndex: 0
        };
    }

    mapTabs(tabComponent, index) {
        const {openTabIndex} = this.state;
        return openTabIndex === index ? tabComponent : null;
    }

    mapTabHeader(tabComponent, index) {
        const {openTabIndex} = this.state;

        return (
            <div onClick={e => {e.preventDefault(); this.openTab(index)}} className={index === openTabIndex ? `h-tabs__header--active` : `h-tabs__header`}>
                {tabComponent.props.name}
            </div>
        );
    }

    openTab(index) {
        this.props.onTabChange(index);
        this.setState({ openTabIndex: index });
    }

    render() {
        const {children} = this.props;
        const tabChildren = React.Children.map(children, this.mapTabs.bind(this));
        const tabHeaders = React.Children.map(children, this.mapTabHeader.bind(this));

        return (
            <div className="h-tabs" {...this.props}>
                <div className="h-tabs__headers">
                    {tabHeaders}
                </div>
                <div className="h-tabs__body">
                    {tabChildren}
                </div>
            </div>
        );
    }
}

class Tab extends Component {
    render() {
        const {children} = this.props;

        return (
            <div className="h-tabs__tab" {...this.props}>
                {children}
            </div>
        );
    }
}

export {Tabs, Tab};