more examples

Author: rwieruch

package-lock.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "react-scripts": "3.1.0"
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
+    "react-scripts": "3.2.0"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -7,7 +7,8 @@ import ListWithAddItem from './components/ListWithAddItem';
 import ListWithUpdateItem from './components/ListWithUpdateItem';
 import ListWithRemoveItem from './components/ListWithRemoveItem';
 import NestedList from './components/NestedList';
-import ListWithoutKey from './components/ListWithoutKey';
+import { ListWithUnstableIndex,
+ListWithStableIndex } from './components/ListWithSort';
 import ListScrollToItem from './components/ListScrollToItem';
 import ListScrollToItemOutside from './components/ListScrollToItemOutside';
 
@@ -33,8 +34,11 @@ const App = () => (
     <h2>"List with remove Item"-Examples</h2>
     <ListWithRemoveItem />
 
-    <h2>"List without Key and thus Bug"-Example</h2>
-    <ListWithoutKey />
+    <h2>"List with unstable Key and thus Bug"-Example</h2>
+    <ListWithUnstableIndex />
+
+    <h2>"List with stable Key"-Example</h2>
+    <ListWithStableIndex />
 
     <h2>"List with nested List"-Example</h2>
     <NestedList />

src/App.js

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React from 'react';
 
 const list = [
   {
@@ -30,7 +30,7 @@ const list = [
 const ListScrollToItem = () => (
   <ul>
     {list.map(item => {
-      const ref = createRef();
+      const ref = React.createRef();
 
       // Scroll Into View API: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
       const handleClick = () =>

src/components/ListScrollToItem.js

@@ -1,4 +1,4 @@
-import React, { createRef } from 'react';
+import React from 'react';
 
 const list = [
   {
@@ -29,7 +29,7 @@ const list = [
 
 const ListScrollToItem = () => {
   const refs = list.reduce((acc, value) => {
-    acc[value.id] = createRef();
+    acc[value.id] = React.createRef();
     return acc;
   }, {});
 

src/components/ListScrollToItemOutside.js

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