Every think is look good expect one performance issue in the code. You have already activeIndex, so no need to traverse again the whole map for render tab content. Here modified the Tabs class as below

class Tabs extends React.Component {

constructor() {

    super();

    this.state = {
        activeIndex : 0
    }
}

handleOnClick(key, event) {

    event.preventDefault();

    this.setState({
        activeIndex : key
    });
}

renderNavItem(key) {

    let tab = this.props.children[key];

    return (
        <li key={ key } className={ this.state.activeIndex == key ? 'active' : ''}>
            <a href="#" onClick={ this.handleOnClick.bind(this, key) }>{ tab.props.title }</a>
        </li>
    );
}

render() {

    let active = this.state.activeIndex;

    let tabs = this.props.children[active];

    return (
        <div className={ this.props.className }>
            <ul className="tabs-nav">
                { Object.keys(this.props.children).map(this.renderNavItem.bind(this)) }
            </ul>
            <div className="tabs-content">
                { tabs.props.children }
            </div>
        </div>
    )
  }
 }

Every thing looks good except one performance issue in the code. You have already activeIndex, so no need to traverse the whole map again to render tab content. 

Here is the modified Tabs class as below:

class Tabs extends React.Component {

constructor() {

    super();

    this.state = {
        activeIndex : 0
    }
}

handleOnClick(key, event) {

    event.preventDefault();

    this.setState({
        activeIndex : key
    });
}

renderNavItem(key) {

    let tab = this.props.children[key];

    return (
        <li key={ key } className={ this.state.activeIndex == key ? 'active' : ''}>
            <a href="#" onClick={ this.handleOnClick.bind(this, key) }>{ tab.props.title }</a>
        </li>
    );
}

render() {

    let active = this.state.activeIndex;

    let tabs = this.props.children[active];

    return (
        <div className={ this.props.className }>
            <ul className="tabs-nav">
                { Object.keys(this.props.children).map(this.renderNavItem.bind(this)) }
            </ul>
            <div className="tabs-content">
                { tabs.props.children }
            </div>
        </div>
    )
  }
 }