Cacher is the code snippet organizer for pro developers

export class Filters extends React.PureComponent {
  render() {
    return (
      <div>
        <span>Show: </span>
        <select onChange={this.props.onChange} value={this.props.active}>
          <option value="SHOW_ALL">All</option>
          <option value="SHOW_ACTIVE">Active</option>
          <option value="SHOW_COMPLETED">Completed</option>
        </select>
      </div>
    );
  }
}

export class Todo extends React.PureComponent {
  onClick = () => this.props.toggleTodo(this.props.id);
  onDelete = () => this.props.onDelete(this.props.id);

  render() {
    return (
      <li>
       <span onClick={this.toggleTodo}>
         {this.props.text}
       </span>
        <button onClick={this.onDelete}>Delete</button>
      </li>
    );
  }
}

export class TodoList extends React.PureComponent {
  toggleTodo = id => this.props.toggleTodo(id);
  onDelete = id => this.props.onDelete(id);

  render() {
    return (
      <ul>
        {this.props.todos.map(todo => (
          <Todo
            key={todo.id}
            {...todo}
            toggleTodo={this.toggleTodo}
            onDelete={this.onDelete}
          />
        ))}
      </ul>
    );
  }
}

export class AddTodo extends React.PureComponent {
  render() {
    return (...);
  }
}