unstable indix

Author: rwieruch

src/components/ListWithoutKey.js

@@ -2,34 +2,7 @@ import React from 'react';
 
 const initialList = ['Learn React', 'Learn GraphQL'];
 
-const ListWithoutKey = () => {
-  const [list, setList] = React.useState(initialList);
-
-  const handleClick = event => {
-    setList(list.slice().reverse());
-  };
-
-  return (
-    <div>
-      <ul>
-        {list.map((item, index) => (
-          <li>
-            <label>
-              <input type="checkbox" />
-              {item}
-            </label>
-          </li>
-        ))}
-      </ul>
-
-      <button type="button" onClick={handleClick}>
-        Reverse List
-      </button>
-    </div>
-  );
-};
-
-// const ListWithIndex = () => {
+// const ListWithoutKey = () => {
 //   const [list, setList] = React.useState(initialList);
 
 //   const handleClick = event => {
@@ -40,7 +13,7 @@ const ListWithoutKey = () => {
 //     <div>
 //       <ul>
 //         {list.map((item, index) => (
-//           <li key={index}>
+//           <li>
 //             <label>
 //               <input type="checkbox" />
 //               {item}
@@ -56,4 +29,31 @@ const ListWithoutKey = () => {
 //   );
 // };
 
-export default ListWithoutKey;
+const ListWithUnstableIndex = () => {
+  const [list, setList] = React.useState(initialList);
+
+  const handleClick = event => {
+    setList(list.slice().reverse());
+  };
+
+  return (
+    <div>
+      <ul>
+        {list.map((item, index) => (
+          <li key={index}>
+            <label>
+              <input type="checkbox" />
+              {item}
+            </label>
+          </li>
+        ))}
+      </ul>
+
+      <button type="button" onClick={handleClick}>
+        Reverse List
+      </button>
+    </div>
+  );
+};
+
+export default ListWithUnstableIndex;