Tabs1.js

  getHeader(tabs) {
    return tabs.map((tab, i) => {
      const style = this.isSelected(tab) ? activeTabHeaderStyle : tabHeaderStyle;
      return (
        <span
          key={tab.props.value}
          onClick={e => this.selectTab(e, tab.props.value)}
          style={i === 0 ? style : Object.assign({}, style, sideHeaderStyle)}
        >
          {tab.props.header}
        </span>
      );
    });
  }
  
  render() {
    const { children } = this.props;
    const tabs = Children.toArray(children);

    return (
      <div style={tabsStyle}>
        <div style={tabsHeaderStyle}>{this.getHeader(tabs)}</div>
        <div style={tabsContentStyle}>
          {_.find(tabs, tab => this.isSelected(tab))}
        </div>
      </div>
    );
  }