Firebase - Section 10

StephenGrider · StephenGrider · commit 323226d966ad · 2015-06-04T23:00:38.000-07:00
diff --git a/todos/index.html b/todos/index.html
@@ -8,6 +8,9 @@
     .loaded {
       opacity: 1;
     }
+    .input-group {
+      margin-bottom: 15px;
+    }
   </style>
 </head>
 <body>
diff --git a/todos/src/app.jsx b/todos/src/app.jsx
@@ -25,6 +25,7 @@ var App = React.createClass({
           To-Do List
         </h2>
         <Header itemsStore={this.firebaseRefs.items} />
+        <hr />
         <div className={"content " + (this.state.loaded ? 'loaded' : '')}>
           <List items={this.state.items} />
         </div>
diff --git a/todos/src/list-item.jsx b/todos/src/list-item.jsx
@@ -0,0 +1,25 @@
+var React = require('react');
+
+module.exports = React.createClass({
+  getInitialState: function() {
+    return {
+      text: this.props.item.text
+    }
+  },
+  render: function() {
+    return <div className="input-group">
+      <span className="input-group-addon">
+        <input type="checkbox" />
+      </span>
+      <input type="text"
+        className="form-control"
+        value={this.state.text}
+        />
+      <span className="input-group-btn">
+        <button className="btn btn-default">
+          Delete
+        </button>
+      </span>
+    </div>
+  }
+});
diff --git a/todos/src/list.jsx b/todos/src/list.jsx
@@ -1,10 +1,11 @@
 var React = require('react');
+var ListItem = require('./list-item');
 
 module.exports = React.createClass({
   render: function() {
-    return <ul>
+    return <div>
       {this.renderList()}
-    </ul>
+    </div>
   },
   renderList: function() {
     if(this.props.items && Object.keys(this.props.items).length === 0) {
@@ -15,10 +16,15 @@ module.exports = React.createClass({
       var children = [];
 
       for(var key in this.props.items) {
+        var item = this.props.items[key];
+        item.key = key;
+
         children.push(
-          <li>
-            {this.props.items[key].text}
-          </li>
+          <ListItem
+            item={item}
+            key={key}
+            >
+          </ListItem>
         )
       }
 
