<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 ToDo extends Component { constructor() { super(); this.state = { todos: [], } this.todoRemove = this.todoRemove.bind(this); this.todoEdit = this.todoEdit.bind(this); } todoRemove(id) { this.setState({ todos: this.state.todos.filter(todo => todo.id != id) }) } todoEdit(id, title) { this.setState({ todos: this.state.todos.map(todo => todo.id === id ? todo.title = title : "")) }) } render() { const todos = this.state.todos; return ( <div className="c-todo"> {todos.map(todo => <TodoItem key={todo.id} todoRemove={this.todoRemove} todoEdit={this.todoEdit} {...todo} />)} </div> ) } } class TodoItem extends Component { constructor() { super(); } render() { return ( <div className="todo-item"> <input type="checkbox" {this.props.isActive ? "checked" : ""} /> <span className="todo-item__title">{this.props.title}</span> <TodoRemove todoRemove={this.props.todoRemove} /> </div> ) } } class TodoRemove extends Component { constructor() { super(); this.handleClick = this.handleClick.bind(this); } handleClick(id) { this.props.todoRemove(id); } render() { // this.props.todoRemove.bind(null, this.props.id) return ( <button type="button" onClick={this.handleClick}>delete</button> ) } } class TodoEdit extends Component { constructor() { super(); this.state = { newValue: "" } this.handleClick = this.handleClick.bind(this); } handleClick(e) { } render() { return ( <div className="todo-edit"> <input type="text" style="display: none;" value={this.state.newValue} /> <button type="button" onClick={this.handleClick}>{}</button> </div> ) } } export default ToDo;