gistfile1.diff

diff --git a/todomvc/react/js/app.js b/todomvc/react/js/app.js
index c72cd7d..5b88cd5 100755
--- a/todomvc/react/js/app.js
+++ b/todomvc/react/js/app.js
@@ -23,7 +23,6 @@
 			return {
 				todos: todos,
 				nowShowing: ALL_TODOS,
-				editing: null
 			};
 		},
 
@@ -88,24 +87,12 @@
 			this.setState({todos: newTodos});
 		},
 
-		edit: function (todo, callback) {
-			// refer to todoItem.js `handleEdit` for the reasoning behind the
-			// callback
-			this.setState({editing: todo.id}, function () {
-				callback();
-			});
-		},
-
 		save: function (todoToSave, text) {
 			var newTodos = this.state.todos.map(function (todo) {
 				return todo !== todoToSave ? todo : Utils.extend({}, todo, {title: text});
 			});
 
-			this.setState({todos: newTodos, editing: null});
-		},
-
-		cancel: function () {
-			this.setState({editing: null});
+			this.setState({todos: newTodos});
 		},
 
 		clearCompleted: function () {
@@ -142,8 +129,6 @@
 						todo:todo,
 						onToggle:this.toggle.bind(this, todo),
 						onDestroy:this.destroy.bind(this, todo),
-						onEdit:this.edit.bind(this, todo),
-						editing:this.state.editing === todo.id,
 						onSave:this.save.bind(this, todo),
 						onCancel:this.cancel}
 					)
diff --git a/todomvc/react/js/todoItem.js b/todomvc/react/js/todoItem.js
index 62ddc95..f12c76d 100755
--- a/todomvc/react/js/todoItem.js
+++ b/todomvc/react/js/todoItem.js
@@ -13,14 +13,20 @@
 	var ENTER_KEY = 13;
 
 	window.TodoItem = React.createClass({displayName: 'TodoItem',
+		getInitialState: function() {
+			return {
+				editing: false
+			};
+		},
+
 		handleSubmit: function () {
-			var val = this.state.editText.trim();
+			var val = this.refs.editField.getDOMNode().value.trim();
 			if (val) {
 				this.props.onSave(val);
-				this.setState({editText: val});
 			} else {
 				this.props.onDestroy();
 			}
+			this.setState({editing: false});
 			return false;
 		},
 
@@ -29,31 +35,21 @@
 			// parent's `onEdit` (which in this case triggeres a re-render), and
 			// immediately manipulate the DOM as if the rendering's over. Put it as a
 			// callback. Refer to app.js' `edit` method
-			this.props.onEdit(function () {
+			this.setState({ editing: true}, function() {
 				var node = this.refs.editField.getDOMNode();
 				node.focus();
 				node.setSelectionRange(node.value.length, node.value.length);
 			}.bind(this));
-			this.setState({editText: this.props.todo.title});
 		},
 
 		handleKeyDown: function (event) {
 			if (event.keyCode === ESCAPE_KEY) {
-				this.setState({editText: this.props.todo.title});
 				this.props.onCancel();
 			} else if (event.keyCode === ENTER_KEY) {
 				this.handleSubmit();
 			}
 		},
 
-		handleChange: function (event) {
-			this.setState({editText: event.target.value});
-		},
-
-		getInitialState: function () {
-			return {editText: this.props.todo.title};
-		},
-
 		/**
 		 * This is a completely optional performance enhancement that you can implement
 		 * on any React component. If you were to delete this method the app would still
@@ -64,8 +60,7 @@
 			return (
 				nextProps.todo.id !== this.props.todo.id ||
 				nextProps.todo !== this.props.todo ||
-				nextProps.editing !== this.props.editing ||
-				nextState.editText !== this.state.editText
+				nextState.editing !== this.state.editing
 			);
 		},
 
@@ -73,7 +68,7 @@
 			return (
 				React.DOM.li( {className:React.addons.classSet({
 					completed: this.props.todo.completed,
-					editing: this.props.editing
+					editing: this.state.editing
 				})}, 
 					React.DOM.div( {className:"view"}, 
 						React.DOM.input(
@@ -90,9 +85,8 @@
 					React.DOM.input(
 						{ref:"editField",
 						className:"edit",
-						value:this.state.editText,
+						defaultValue:this.props.todo.title,
 						onBlur:this.handleSubmit,
-						onChange:this.handleChange,
 						onKeyDown:this.handleKeyDown}
 					)
 				)