Update demo

lxsmnsyc · Oct 19, 2023 · 8cb7daf · 8cb7daf
1 parent e97ac20
commit 8cb7daf
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/examples/preact/src/App.tsx b/examples/preact/src/App.tsx
@@ -5,6 +5,7 @@ import type { JSX } from 'preact/jsx-runtime';
 interface TodoItem {
   id: number;
   message: string;
+  done: boolean;
 }
 
 interface TodoListItemProps {
@@ -13,23 +14,30 @@ interface TodoListItemProps {
 }
 
 function TodoListItem({ item, setList }: TodoListItemProps): JSX.Element {
-  const [done, setDone] = useState(false);
   return (
     <div
-      className={`todo-item ${done ? 'complete' : 'pending'}`}
+      className={`todo-item ${item.done ? 'complete' : 'pending'}`}
     >
       <div className="todo-item-content">
         {item.message}
       </div>
       <div className="todo-item-actions">
         <button
           type="button"
-          className={`todo-item-toggle ${done ? 'complete' : 'pending'}`}
+          className={`todo-item-toggle ${item.done ? 'complete' : 'pending'}`}
           onClick={(): void => {
-            setDone(!done);
+            setList((list) => list.map((value) => {
+              if (value === item) {
+                return {
+                  ...value,
+                  done: !item.done,
+                };
+              }
+              return value;
+            }));
           }}
         >
-          {done ? 'Completed' : 'Pending'}
+          {item.done ? 'Completed' : 'Pending'}
         </button>
         <button
           type="button"

diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -4,6 +4,7 @@ import './main.css';
 interface TodoItem {
   id: number;
   message: string;
+  done: boolean;
 }
 
 interface TodoListItemProps {
@@ -12,23 +13,30 @@ interface TodoListItemProps {
 }
 
 function TodoListItem({ item, setList }: TodoListItemProps): JSX.Element {
-  const [done, setDone] = useState(false);
   return (
     <div
-      className={`todo-item ${done ? 'complete' : 'pending'}`}
+      className={`todo-item ${item.done ? 'complete' : 'pending'}`}
     >
       <div className="todo-item-content">
         {item.message}
       </div>
       <div className="todo-item-actions">
         <button
           type="button"
-          className={`todo-item-toggle ${done ? 'complete' : 'pending'}`}
+          className={`todo-item-toggle ${item.done ? 'complete' : 'pending'}`}
           onClick={(): void => {
-            setDone(!done);
+            setList((list) => list.map((value) => {
+              if (value === item) {
+                return {
+                  ...value,
+                  done: !item.done,
+                };
+              }
+              return value;
+            }));
           }}
         >
-          {done ? 'Completed' : 'Pending'}
+          {item.done ? 'Completed' : 'Pending'}
         </button>
         <button
           type="button"