import React from 'react';
import TodoItem from './TodoItem';

export default class extends React.Component {
  render() {
    return (
      <div>
        <ul>
          <For each="item" of={this.props.todos}>
            <TodoItem
              key={item.id}
              id={item.id}
              value={item.value}
              completed={item.completed}
              onEdit={this.props.onEditTodo}
              onDelete={this.props.onDeleteTodo}
              onSubmit={this.props.onAddTodo}
            />
          </For>
        </ul>
        <span>
          {this.props.todos.length}{' '}
          todo{this.props.todos.length > 1 ? 's' : ''}
        </span>

        <style jsx>{`
          ul {
            list-style: none;
            padding-left: 0;
          }
        `}</style>
      </div>
    );
  }
}

import React from 'react';
import TodoItem from './TodoItem';

export default class extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.onAddTodo}>Add Todo</button>
        <ul>
          <For each="item" of={this.props.todos}>
            <TodoItem
              key={item.id}
              id={item.id}
              value={item.value}
              completed={item.completed}
              onEdit={this.props.onEditTodo}
              onDelete={this.props.onDeleteTodo}
              onSubmit={this.props.onAddTodo}
            />
          </For>
        </ul>
        <span>
          {this.props.todos.length}{' '}
          todo{this.props.todos.length > 1 ? 's' : ''}
        </span>

        <style jsx>{`
          ul {
            list-style: none;
            padding-left: 0;
          }
        `}</style>
      </div>
    );
  }
}

Add button for adding todo
Add button for adding todo

Previously the only way to create a new todo was to hit “enter” on the
last todo 