feat: update Items Complex immutablely

CatzillaOrz · Aug 20, 2023 · 0068ae6 · 0068ae6
1 parent b9216a4
commit 0068ae6
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/App.js b/src/App.js
@@ -8,19 +8,27 @@ const initialItems = [
 
 export default function App() {
     const [items, setItems] = useState(initialItems);
+
     function handleAddItems(item) {
         setItems((items) => [...items, item]);
     }
+
     function handleDeleteItem(id) {
         setItems((items) => items.filter((item) => item.id !== id));
     }
+
+    function handleToggleItem(id) {
+        setItems((items) => items.map((item) => (item.id === id ? { ...item, packed: !item.packed } : item)));
+    }
+
     return (
         <div className="app">
             <Logo />
             <Form onAddItems={handleAddItems} />
             <PackingList
                 items={items}
                 onDeleteItem={handleDeleteItem}
+                onToggleItems={handleToggleItem}
             />
             <Stats />
         </div>
@@ -76,7 +84,7 @@ function Form({ onAddItems }) {
     );
 }
 
-function PackingList({ items, onDeleteItem }) {
+function PackingList({ items, onDeleteItem, onToggleItems }) {
     return (
         <div className="list">
             <ul>
@@ -85,16 +93,21 @@ function PackingList({ items, onDeleteItem }) {
                         item={item}
                         key={item.id}
                         onDeleteItem={onDeleteItem}
+                        onToggleItems={onToggleItems}
                     />
                 ))}
             </ul>
         </div>
     );
 }
 
-function Item({ item, onDeleteItem }) {
+function Item({ item, onDeleteItem, onToggleItems }) {
     return (
         <li>
+            <input
+                type="checkbox"
+                onChange={() => onToggleItems(item.packed)}
+            />
             <span style={item.packed ? { textDecoration: 'line-through' } : {}}>
                 {item.quantity}
                 {item.description}{' '}