<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>

import React from 'react'; import { getTabs } from '../lib/fetchHelpers'; class Tabs extends React.Component { constructor() { super(); this.state = { tabs: [], activeTab: 1 } this.handleClick = this.handleClick.bind(this); } handleClick(current) { this.setState({ activeTab: current }) } componentDidMount() { getTabs().then(tabs => this.setState({ tabs: tabs })) } render() { let currentTab = this.state.activeTab; return ( <div> <TabsHeader tabs={this.state.tabs} activeTab={this.state.activeTab} handleClick={this.state.handleClick} /> <TabsContent tabs={this.state.tabs} activeTab={this.state.activeTab} /> </div> ) } } class TabsHeader extends React.Component { static propTypes = { tabs: React.PropTypes.object } render() { let tabs = this.props.tabs; return ( <ul className="tabs-list"> {this.props.tabs.map(tab => <TabHead key={tab.id} {...tab} handleClick={this.props.handleClick} />)} </ul> ) } } class TabHead extends React.Component { constructor() { super(); } render() { let tab = this.props.tab; return ( <li className="tab { tab.activeTab === tab.id ?? active }" onClick={this.props.handleClick}>{tab.title}</li> ) } } class TabsContent extends React.Component { static propTypes = { tabs: React.PropTypes.object } render() { return ( <ul className="tabs-list"> {this.props.tabs.map(tab => <Tab key={tab.ID} {...tab} />)} </ul> ) } } export default Tabs; import React from 'react'; import { getTabs } from '../lib/fetchHelpers'; class Tabs extends React.Component { constructor() { super(); this.state = { tabs: [], activeTab: 1 } this.handleClick = this.handleClick.bind(this); } handleClick(current) { this.setState({ activeTab: current }) } componentDidMount() { getTabs().then(tabs => this.setState({ tabs: tabs })) } render() { let currentTab = this.state.activeTab; return ( <div> <TabsHeader tabs={this.state.tabs} activeTab={this.state.activeTab} handleClick={this.state.handleClick} /> <TabsContent tabs={this.state.tabs} activeTab={this.state.activeTab} /> </div> ) } } class TabsHeader extends React.Component { static propTypes = { tabs: React.PropTypes.object } render() { let tabs = this.props.tabs; return ( <ul className="tabs-list"> {this.props.tabs.map(tab => <TabHead key={tab.id} {...tab} handleClick={this.props.handleClick} />)} </ul> ) } } class TabHead extends React.Component { constructor() { super(); } render() { let tab = this.props.tab; return ( <li className="tab { tab.activeTab === tab.id ?? 'active' }" onClick={this.props.handleClick}>{tab.title}</li> ) } } class TabsContent extends React.Component { static propTypes = { tabs: React.PropTypes.object } render() { tabs = this.props.tabs; return ( <div className="tabs-content"> {tabs.map(tab => <Tab key={tab.ID} {...tab} />)} </div> ) } } class Tab extends React.Component { static propTypes = { tab: React.PropTypes.object } render() { tab = this.props.tab; return() { <div className="tab-content__item { tab.isActive == tab.id ?? 'active'} ">{tab.content}</li> } } } export default Tabs;