Step 5.1: Update Task component to add features.

Task.jsx

@@ -7,9 +7,33 @@ Task = React.createClass({
     task: React.PropTypes.object.isRequired
   },
 
+  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() {
-    return (
-      <li>{this.props.task.text}</li>
+    // 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' : '';
+
+    let result = (
+      <li className={taskClassName}>
+        <button className="delete" onClick={this.deleteThisTask}>
+          &times;
+          </button>
+
+        <input type="checkbox" readOnly="{true}" checked={this.props.task.checked} onClick={this.toggleChecked} />
+
+        <span className="text">{this.props.task.text}</span>
+      </li>
     );
+    return result;
   }
 });