<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css"> <script src=""></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'; const todoUrl = ""; const tabNames = ""; const getTodos = () => { fetch(todoUrl).then(response => response.json()); } const getTabs = () => { fetch(tabNames).then(response => response.json()); } class App extends Component { constructor() { super(); this.state = { items = [], tabs = [], activeTab = 0 } } componentDidMound() { this.setState({ items: getTodos(), tabs: getTabs() }) } render() { const items = this.state.items; return( `<div className="c-todolist"> <TodoTabs {...items} /> <TodoTabContent {...items} activeTab={this.state.activeTab} /> </div>` ) } } class TodoTabs extends Component { constructor() { super(); } render() { const tabs = this.props.tabs; return( `<ul className="c-tabs" {...this.props.items}> { tabs.map(tab => <TodoTab key={tab.ID} {...tab} activeTab={this.props.activeTab} /> } </ul>` ) } } class TodoTab extends Component { constructor() { super(); } render() { const tab = this.props.tab; return( `<li className="c-tab">{tab.Name}</li>` ) } } class TodoTabContent extends Component { constructor() { super(); } getFilteredTodos() { const filterVal = this.props.activeTab; const todos = this.props.items; return todos.filter(todo => { switch(filterVal) { case 0: return todo; break; case 1: return todo.isCompleted == false; break; case 2: return todo.isCompleted == true; break; } }) } render() { const todos = getFilteredTodos(); return ( `<div class="c-tab-content"> {todos.map(todo => <TodoItem key={todo.ID} {...todo}/>)} </div>` ) } } class TodoItem extend Component { constructor() { super(); } render() { const item = this.props.item; return( `<div className="todo__item">{item.name}</div>` ) } }