Step 5 of TODO App with React tutorial - adding UI for checking off a…

…nd deleting TODO items

Task.jsx

@@ -5,9 +5,37 @@ Task = React.createClass({
     // We can use propTypes to indicate it is required
     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() {
+    // 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}>
+          &times;
+        </button>
+
+        <input
+          type="checkbox"
+          readOnly={true}
+          checked={this.props.task.checked}
+          onClick={this.toggleChecked} />
+
+        <span className="text">{this.props.task.text}</span>
+      </li>
     );
   }
 });