simple-todos-react-5.1.diff

diff --git a/imports/ui/Task.jsx b/imports/ui/Task.jsx
index a5000e0..3140871 100644
--- a/imports/ui/Task.jsx
+++ b/imports/ui/Task.jsx
@@ -1,10 +1,40 @@
 import React, { Component, PropTypes } from 'react';
 
+import { Tasks } from '../api/tasks.js';
+
 // Task component - represents a single todo item
 export default class Task extends Component {
+  toggleChecked() {
+    // Set the checked property to the opposite of its current value
+    Tasks.update(this.props.task._id, {
+      $set: { checked: !this.props.task.checked },
+    });
+  }
+
+  deleteThisTask() {
+    Tasks.remove(this.props.task._id);
+  }
+
   render() {
+    // Give tasks a different className when they are checked off,
+    // so that we can style them nicely in CSS
+    const taskClassName = this.props.task.checked ? 'checked' : '';
+
     return (
-      <li>{this.props.task.text}</li>
+      <li className={taskClassName}>
+        <button className="delete" onClick={this.deleteThisTask.bind(this)}>
+          &times;
+        </button>
+
+        <input
+          type="checkbox"
+          readOnly
+          checked={this.props.task.checked}
+          onClick={this.toggleChecked.bind(this)}
+        />
+
+        <span className="text">{this.props.task.text}</span>
+      </li>
     );
   }
 }