Chapter 11 — State'ni Yuqoriga Ko'tarish

Ikki komponent bir xil state'ga muhtoj bo'lganda — state ularning umumiy ota-komponentiga "ko'tariladi".

---

11.1 Muammo va Yechim

Example — Muammo

code.text
TEXTNusxalash
01SearchInput (o'z state'i)      ProductList (o'z state'i)
02        ↓                              ↓
03   sinxronlanmaydi — ikkalasi bir-biridan bexabar

Example — Yechim

App.jsx
React JSXNusxalash
01function SearchPage() {
02  const [query, setQuery] = useState("");
03  return (
04    <>
05      <SearchInput value={query} onChange={setQuery} />
06      <ProductList query={query} />
07    </>
08  );
09}

Diagram

code.text
TEXTNusxalash
01          SearchPage (state: query)
02             /              \
03    props ↓                    ↓ props
04SearchInput                 ProductList
05(query'ni o'zgartiradi)     (query'dan foydalanadi)

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Ikkita input (ism va familiya) qiymatlarini parentda birlashtirib, to'liq ismni ko'rsating.

🔴 Exercise 2 — Hard

Task: Qidiruv maydoni va filtrlangan ro'yxatni bir-biriga bog'lang.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function SearchInput() {
02  const [value, setValue] = useState("");
03  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
04}
05 
06function ProductList() {
07  // query'ga kirish imkoni yo'q!
08}

Your Task: ProductList SearchInputdagi qiymatni qanday bila oladi?

<details> <summary>Solution</summary> Hech qanday to'g'ridan-to'g'ri yo'l yo'q — `value` state'i `SearchInput`ning o'z ichida "qamalib qolgan". Yechim — state'ni umumiy parentga ko'tarish: ```jsx function SearchPage() { const [query, setQuery] = useState(""); return ( <> <SearchInput value={query} onChange={setQuery} /> <ProductList query={query} /> </> ); } ``` </details>

📌 Chapter Summary

Umumiy state — eng yaqin umumiy ota-komponentga ko'tariladi. Ma'lumot faqat bir yo'nalishda oqadi: parent → child (props orqali).

🎯 Key Takeaways

• Sibling komponentlar bevosita gaplasholmaydi
• Umumiy state — umumiy parentda joylashadi
• State'ni kerak bo'lgandan yuqoriga ko'tarmang — bu keraksiz re-render keltirib chiqaradi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01function Parent() {
02  const [shared, setShared] = useState(initial);
03  return (
04    <>
05      <ChildA value={shared} onChange={setShared} />
06      <ChildB value={shared} />
07    </>
08  );
09}

---