From bd35029fc1d9c9c30df541f1859f39748725fd70 Mon Sep 17 00:00:00 2001
From: Laktionov Anton <tavres@gmail.com>
Date: Tue, 5 May 2026 21:34:05 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=D0=B8=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BB=D0=B1=D1=8D=D0=BA=20=D1=81=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B1=D1=80=D0=BE=D1=81=D0=BE=D0=BC=20=D0=BD=D0=B0=202?=
 =?UTF-8?q?=20=D1=83=D1=80=D0=BE=D0=B2=D0=BD=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 38 +++++++++++++++++++++++++++++---------
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index d973d7f..0310352 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2,28 +2,48 @@ import styles from './styles/App.module.scss'
 import React, { useState, useCallback } from 'react'
 
 function Parent() {
-    const [text,setText] = useState('')
+    const [selectedId,setSelectedId] = useState(null);
     
-    const handlerChange = useCallback( event => {
-        setText(event.target.value);
+    const items = [
+        {id:1, name: 'Первый'},
+        {id:2, name: 'Второй'},
+        {id:3, name: 'Третий'},
+        {id:4, name: 'Четвертый'},
+    ];
+    
+    const handleSelect = useCallback( id => {
+        setSelectedId(id);
     },[]);
     
     return (
         <>
-            <h2>Проверка события onChange</h2>
+            <h2>Проверка события select</h2>
             <div>
-                <Child value={text} onChange={handlerChange} />
-                <p>Вы ввели текст: {text}</p>
+                <ItemList items={items} onSelect={handleSelect} />
+                {selectedId && <p>Выбран элемент с ID: {selectedId}</p>}
             </div>
         </>
     );
 }
 
-function Child({ value, onChange }) {
-    console.log('rendred');
-    return <input type="text" value={value} onChange={onChange} />
+function ItemList({items, onSelect}) {
+    return (
+        <ul>
+            {items.map(item => (
+                <Item key={item.id} item={item} onSelect={onSelect} />
+            ))}
+        </ul>
+    )
 }
 
+const Item = React.memo(({ item, onSelect }) => {
+    console.log(`rendred ${item.name}`);
+    const handleClick = useCallback(() => {
+        onSelect(item.id)
+    })
+    return <li onClick={handleClick}>{item.name}</li>
+});
+
 function App() {
 	return (
 		<>