Added TodoList, TodoItem, TextInput

phacks · Feb 27, 2016 · 90fe2cc · 90fe2cc
1 parent d1d2a56
commit 90fe2cc
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 19 deletions.
diff --git a/src/components/TextInput.jsx b/src/components/TextInput.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default React.createClass({
+  render: function () {
+    return <input className="edit"
+                  autoFocus={true}
+                  type="text" />
+  }
+});
diff --git a/src/components/TodoApp.jsx b/src/components/TodoApp.jsx
@@ -1,28 +1,11 @@
 import React from 'react';
+import TodoList from './TodoList'
 
 export default React.createClass({
-  getItems: function () {
-    return this.props.todos || [];
-  },
   render: function () {
     return <div>
       <section className="todoapp">
-        <section className="main">
-          <ul className="todo-list">
-            {this.getItems().map(item =>
-              <li className="active" key={item.get('text')}>
-                <div className="view">
-                  <input type="checkbox"
-                         className="toggle" />
-                  <label htmlFor="todo">
-                    {item.get('text')}
-                  </label>
-                  <button className="destroy"></button>
-                </div>
-              </li>
-            )}
-          </ul>
-        </section>
+        <TodoList todos={this.props.todos} />
       </section>
     </div>
   }

diff --git a/src/components/TodoItem.jsx b/src/components/TodoItem.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import TextInput from './TextInput';
+
+export default React.createClass({
+
+  render: function () {
+    return <li className="todo">
+      <div className="view">
+        <input type="checkbox"
+               className="toggle" />
+        <label htmlFor="todo">
+          {this.props.text}
+        </label>
+        <button className="destroy"></button>
+      </div>
+      <TextInput />
+    </li>
+  }
+});
diff --git a/src/components/TodoList.jsx b/src/components/TodoList.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import TodoItem from './TodoItem';
+
+export default React.createClass({
+  render: function () {
+    return <section className="main">
+      <ul className="todo-list">
+        {this.props.todos.map(item =>
+          <TodoItem key={item.get('text')}
+                    text={item.get('text')} />
+        )}
+      </ul>
+    </section>
+  }
+});