From 24733636ecf87d7367f032f0f42d7b54d0f1cac4 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Wed, 13 Feb 2019 14:13:57 -0800
Subject: [PATCH] updated key logic

---
 package-lock.json                  | 41 ++++++++++++++++++++++--------
 step07/src/App.tsx                 |  4 +--
 step07/src/components/TodoList.tsx |  4 +--
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index adcdda3..96ed139 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3389,7 +3389,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3410,12 +3411,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3430,17 +3433,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -3557,7 +3563,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -3569,6 +3576,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -3583,6 +3591,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -3590,12 +3599,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3614,6 +3625,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3694,7 +3706,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -3706,6 +3719,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -3791,7 +3805,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -3827,6 +3842,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -3846,6 +3862,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -3889,12 +3906,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/step07/src/App.tsx b/step07/src/App.tsx
index f5df052..e7679f6 100644
--- a/step07/src/App.tsx
+++ b/step07/src/App.tsx
@@ -31,11 +31,9 @@ export class TodoApp extends React.Component<any, any> {
 
   _addTodo = () => {
     const { todos, inputValue } = this.state;
-    const id = todos[0] ? todos[0].id + 1 : 0;
     const newTodos = [
       {
-        id: id,
-        key: id,
+        id: todos[0] ? todos[0].id + 1 : 0,
         text: inputValue
       },
       ...todos
diff --git a/step07/src/components/TodoList.tsx b/step07/src/components/TodoList.tsx
index 2913842..2989ff2 100644
--- a/step07/src/components/TodoList.tsx
+++ b/step07/src/components/TodoList.tsx
@@ -13,9 +13,9 @@ export class TodoList extends React.Component<any, any> {
       return filter == 'all' || matchesActive || matchesCompleted; 
     })
 
-    const TodoListItems = filteredTodos.map((todo, i) => {
+    const TodoListItems = filteredTodos.map((todo) => {
       return (
-        <TodoListItem onTodoToggle={onTodoToggle} {...todo} />
+        <TodoListItem key={todo.id} onTodoToggle={onTodoToggle} {...todo} />
       );
     })