<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, { Component } from 'react'; import PropTypes from 'prop-types'; import {getTabs} from '../utils/fetchUtils'; class Tabs extends Component { constructor() { super(); this.state = { tabs:[], activeTab: 1 } this.changeTab = this.changeTab.bind(this); this.getCurrentTab = this.getCurrentTab.bind(this); } componentDidMount() { getTabs().then(tabs => this.setState({ tabs })) } changeTab(newTabId) { this.setState({ activeTab: newTabId }) } getCurrentTab() { return this.tabs.find(tab => tab.id === this.state.activeTab); } render() { const currentTab = this.getCurrentTab(); return ( <div className="c-tabs"> <TabsHeader tabs={this.state.tabs} activeTab={this.state.activeTab} changeTab={this.changeTab} /> <TabsContent tab={currentTab} /> </div> ) } } class TabsHeader extends Component { constructor() { super(); } render() { return ( <div className="o-tabs-header" > {this.props.tabs.map(tab => <TabHeader key={tab.id} {...tab} activeTab={this.props.activeTab} changeTab={this.props.changeTab} />)} </div> ) } } class TabHeader extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick() { this.props.changeTab(this.props.id); } render() { // onClick={this.props.changeTab.bind(this, this.props.id)} return ( <li className="o-tab-header__item " + {this.props.activeTab === this.props.id ? "o-tab--active" : ""} onClick={this.handleClick}>{this.props.title}</li> ) } } class TabsContent extends Component { static propTypes { tab: PropTypes.object } render() { return ( <div className="o-tabs-content"> {this.props.tab.content} </div> ) } }