<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>

// router import React, {Component} from 'react'; import { getTabs } from '../lib/fetchHelpers'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class App extends Component { constructor() { super(); } } class export default App; // todo class ToDoList extends Component { constructor() { super(); this.state = { toDoList: [], isActive: true } this.toggleClick = this.toggleClick.bind(this); } toggleClick() { this.setState({ isActive: !isActive }) } render() { return { <div className="todo-list"> {this.state.toDoList.map(todo => <ToDo key={todo.id} isActive={this.state.isActive} toggleClick={this.toggleClick} {...todo} /> )} </div> } } } class ToDo extends Component { constructor() { super(); this.state = { } } } // tabs class Tabs extends Component { constructor() { super(); this.state = { tabs: [], activeTab: 0 } this.handleClick = this.handleClick.bind(this); } handleClick(id) { this.setState({ currentTab: id }) } getCurrentTab = () => this.state.tabs.find(tab => tab.id == activeTab); render() { return { <div className="c-tabs" style={{width: 800px; margin: 20px auto;}}> <TabsHeader activeTab={this.state.activeTab} tabs={this.state.tabs} handleClick={this.handleClick} /> <TabsContent getCurrentTab={this.getCurrentTab} /> </div> } } } class TabsHeader extends Component { constructor() { super(); } render() { const tabs = this.props.tabs; return { <ul className="tabs-header"> { tabs.map(tab => <TabTitle key={tab.id} activeTab={this.props.activeTab} handleClick={this.props.handleClick} {...tab} /> )} </ul> } } } class TabTitle extends Component { constructor() { super(); } render() { return { <li className={this.props.activeTab === this.props.id ? "active-tab" : ""} onClick={this.props.handleClick(this.props.id)}>{this.props.title}</li> } } } class TabContent extends Component { constructor() { super(); } render() { const currentTab = this.props.getCurrentTab(); return { <div className="tab-content"> {currentTab.content} </div> } } } export default Tabs;