Component React

.jsx

const Tab = ({ dataTab, tabActive, onClick, children }) => {
  const isActive = dataTab === tabActive;
  return (
    <li className={`vex_Tab-tab ${isActive ? 'is-active' : ''}`} onClick={onClick}>
      {children}
    </li>
  );
};

Tab.propTypes = {
  dataTab: PropTypes.number,
  tabActive: PropTypes.number,
  onClick: PropTypes.func,
  children: PropTypes.node,
};

const Tabs = ({ children }) => <article className="vex_Tabs vex_Tabs--primary">{children}</article>;
const TabsHeader = ({ children }) => <ul>{children}</ul>;
const TabsBody = ({ children }) => (
  <section className="vex_Tabs-content mi_u-md-paddingL mi_u-md-paddingR">{children}</section>
);
const TabsContent = ({ children }) => <section className="mi_u-md-marginT">{children}</section>;

Tabs.propTypes = TabsHeader.propTypes = TabsBody.propTypes = TabsContent.propTypes = {
  children: PropTypes.node,
};

class OrderCreation extends React.Component {
  constructor() {
    super();
    this.state = {
      tabActive: 0,
    };
    this.handleClickTab.bind(this);
  }

  handleClickTab(dataTab) {
    return () => {
      this.setState({ tabActive: dataTab });
    };
  }

  render() {
    const { tabActive } = this.state;
    return (
      <Tabs>
        <TabsHeader>
          <Tab dataTab={0} tabActive={tabActive} onClick={this.handleClickTab(0)}>
            Market
          </Tab>
          <Tab dataTab={1} tabActive={tabActive} onClick={this.handleClickTab(1)}>
            Limit
          </Tab>
        </TabsHeader>
        <TabsBody>
          <TabsContent dataTab={0} tabActive={tabActive}>
            Contenido1
          </TabsContent>
          <TabsContent dataTab={1} tabActive={tabActive}>
            Contenido2
          </TabsContent>
        </TabsBody>
      </Tabs>
    );
  }
}

window.OrderCreation = OrderCreation;