Обновление данных для рендринга

src/App.jsx

@@ -1,6 +1,55 @@
-// удаляем все, оставляя лишь пустую функцию App ниже
+import { useState } from 'react'
 
 function App() {
+    const [tasks,setTasks] = useState([]);
+    
+    //Неправильный вариант решения
+    const toggleTask = taskId => {
+        const task = tasks.find(t => t.id === taskId);
+        task.complite = !task.complite; // Мутация
+        setTasks(tasks)
+    }
+    //Правильный вариант решения
+    const toggleTask = taskId => {
+        setTasks(tasks.map(task => 
+            task.id === taskId ? {...task, complite: !task.complite} : task
+        ))
+    }
+    
+    const [user, setUser] = useState({
+        name:'Иван',
+        email:'ivan@example.com',
+        age: 22,
+        address: {
+            city: 'Syktyvkar',
+            street: 'Babushkina',
+            house: 19,
+        }
+    })
+    const updateName = newName => {
+        setUser({
+            ...user,
+            name: newName,
+        });
+    }
+    const updateProfile = updates => {
+        setUser({
+            ...user,
+            ...updates,
+        });
+    }
+    const updateCity = newCity => {
+        setUser(
+            ...user,
+            address: {
+                ...user.address,
+                city: newCity
+            }
+        );
+    }
+    
+    
+    
 	return (
 		<>
 			{/* Добавьте тестовый контент для проверки */}

src/App.module.scss

@@ -0,0 +1,15 @@
+.container {
+/*    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;*/
+    height: 500px;
+    overflow: auto;
+    border: 1px solid black;
+}
+.item {
+    font-size: 16pt;
+    border: 1px dotted gray;
+    /*margin: 5px 10px;
+    padding: 10px;*/
+    border-radius: 5px;
+}