<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 })) } getCurrentTab() { let tab = this.state.tabs.find(tab => tab.id === this.state.activeTab ); return tab; } render() { let currentTab = this.getCurrentTab(); return ( <div> <div>{this.state.activeTab}</div> <TabsHeader activeTab={this.state.activeTab} tabs={this.state.tabs} handleClick={this.handleClick} /> <TabContent activeTab={this.state.activeTab} tab={currentTab} /> </div> ) } } class TabsHeader extends React.Component { static propTypes = { tab: React.PropTypes.array, handleClick: React.PropTypes.func } render() { let tabs = this.props.tabs; return ( <ul className="tabs-list"> {tabs.map(tab => <Tab key={tab.id} activeTab={tab.activeTab} {...tab} handleClick={this.props.handleClick}/>)} </ul> ) } } class Tab extends React.Component { constructor() { super(); } handleClick(){ this.props.handleClick(this.props.id); } render() { return ( <div onClick={this.handleClick.bind(this)}>{this.props.title}</div> ) } } class TabContent extends React.Component { static propTypes = { tab: React.PropTypes.object } static defaultProps = { tab: {} } render() { return ( <div className="tab-content"> {this.props.tab.content} </div> ) } } 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 })) } getCurrentTab() { let tab = this.state.tabs.find(tab => tab.id === this.state.activeTab ); return tab; } render() { let currentTab = this.getCurrentTab(); return ( <div> <div>{this.state.activeTab}</div> <TabsHeader activeTab={this.state.activeTab} tabs={this.state.tabs} handleClick={this.handleClick.bind(this)} /> <TabContent activeTab={this.state.activeTab} tab={currentTab} /> </div> ) } } class TabsHeader extends React.Component { static propTypes = { tab: React.PropTypes.array, handleClick: React.PropTypes.func } render() { let tabs = this.props.tabs; return ( <ul className="tabs-list"> {tabs.map(tab => <Tab key={tab.id} activeTab={tab.activeTab} tab={tab} handleClick={this.props.handleClick}/>)} </ul> ) } } class TabContent extends React.Component { static propTypes = { tab: React.PropTypes.object } static defaultProps = { tab: {} } render() { return ( <div className="tab-content"> {this.props.tab.content} </div> ) } } class Tab extends React.Component { constructor() { super(); } handleClick(){ this.props.handleClick(this.props.tab.id); } render() { return ( <button onClick={this.handleClick.bind(this)}>{this.props.tab.title}</button> ) } } export default Tabs;