final

src/App.jsx

@@ -1,21 +1,32 @@
 import React, { useMemo, useCallback, useState } from 'react'
 
-const Button = React.memo(({ onClick }) => {
+const TodoItem = React.memo(({ item, onToggle, onDelete }) => {
-    console.log('Button rendred');
+    console.log(`rendred ${item.id}`);
-    return <button onClick={onClick}>Click me</button>
+    return <li>
+            {item.name}
+            <button onClick={() => onToggle(item.id)}>Done</button>
+            <button onClick={() => onDelete(item.id)}>remove</button>
+        </li>
 })
 
-function Parent() {
+function ItemList({ items }) {
-    const [count,setCount] = useState(0);
 
-    const handlerClick = useCallback(()=>{
+    const handleToggle = useCallback(id => {
-        setCount(prev => prev + 1);
+        items.done = true;
+        console.log(`Item ${id} done`)
+        console.log(id)
     },[]);
     
+    const handleDelete = useCallback(id => {
+        items.pop(id);
+    },[]);
     return (
         <>
-            <h3>Counter: {count}</h3>
+            <h3>List items</h3>
-            <Button onClick={handlerClick} />
+            {items.map(item => (
+             <TodoItem key={item.id} item={item}
+              onToggle={handleToggle} onDelete={handleDelete} />
+             ))}
         </>
     )
 }
@@ -25,7 +36,10 @@ function App() {
 		<>
 			{/* Добавьте тестовый контент для проверки */}
 			<h1>Hello, React!</h1>
-            <Parent />
+            <ItemList items={[
+                {id:1,name:'Первый',done:false},
+                {id:2,name:'Второй',done:false}
+            ]} />
 		</>
 	)
 }