<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 import lodash from "lodash"; export default App; // todo class TodoModel { constructor(id, title, label, isActive) { this.id = id; this.title = title; this.label = label; this.isActive = isActive; } } class ToDoList extends Component { constructor() { super(); this.state = { toDoList: [], isActive: true } this.toggleClick = this.toggleClick.bind(this); this.removeTodo = this.removeTodo.bind(this); this.addTodo = this.addTodo.bind(this); this.editTodo = this.editTodo.bind(this); } toggleClick() { this.setState({ isActive: !isActive }) } removeTodo(id) { const todos = this.state.toToList.filter(todo => todo.id != id); this.setState({ toDoList: todos }) } addTodo(title) { const id = _.uniqueId('todo-'); const newTodo = new TodoModel(id, title, "new", false); this.setState({ toDoList.push(newTodo); }) } render() { return { <div className="c-todo"> <ToDoAdd addTodo={this.state.addTodo} /> <div className="todo-list"> {this.state.toDoList.map(todo => <ToDo key={todo.id} isActive={this.state.isActive} toggleClick={this.toggleClick} removeTodo={this.removeTodo} {...todo} /> )} </div> </div> } } } class ToDo extends Component { constructor() { super(); } render() { // const {id, title, label, removeTodo} = {this.props}; return ( <div className="todo__item"> <input type="checkbox" {this.props.isActive ?? "checked"} /> <h3 className="todo__title">{this.props.title}</h3> <span className="todo__label">{this.props.label}</span> <div className="todo__btns"> <button type="button" onClick={this.props.editTodo(this.props.id)}>E</button> <button type="button" onClick={this.props.removeTodo(this.props.id)}>x</button> </div> </div> ) } } class ToDoAdd extend Component { constructor() { super(); this.state = { title: "" } } handleClick() { this.props.addTodo(this.state.title); this.setState({ title: "" }) } render() { return ( <div className="todo-add"> <input type="text" placeholder="todo title" value={this.state.title} /> <button type="button" className="todo__btn--green" onClick={this.state.handleClick}>Add</button> </div> ) } } // rep tb class Tabs extend Component { constructor() { super(); this.state = { tabs: [], activeTab: 0 } } render() { const tabs = this.state.tabs; return { } } } // 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;