Firebase - Section 11

todos/src/list-item.jsx

@@ -1,15 +1,25 @@
 var React = require('react');
+var Firebase = require('firebase');
+var rootUrl = 'https://blistering-torch-4253.firebaseio.com/';
 
 module.exports = React.createClass({
   getInitialState: function() {
     return {
-      text: this.props.item.text
+      text: this.props.item.text,
+      done: this.props.item.done
     }
   },
+  componentWillMount: function() {
+    this.fb = new Firebase(rootUrl + 'items/' + this.props.item.id);
+  },
   render: function() {
     return <div className="input-group">
       <span className="input-group-addon">
-        <input type="checkbox" />
+        <input
+          type="checkbox"
+          checked={this.state.done}
+          onChange={this.handleDoneChange}
+          />
       </span>
       <input type="text"
         className="form-control"
@@ -21,5 +31,10 @@ module.exports = React.createClass({
         </button>
       </span>
     </div>
+  },
+  handleDoneChange: function(event) {
+    var update = {done: event.target.checked}
+    this.setState(update);
+    this.fb.update(update);
   }
 });