Chapter 14 — Komponentlar Aloqasi

Props va Lifting State Up — komponentlar orasidagi barcha aloqa turlarining asosi.

---

14.1 Parent → Child va Child → Parent

Example

App.jsx
React JSXNusxalash
01function Parent() {
02  function handleChildClick(message) {
03    console.log("Child yubordi:", message);
04  }
05  return <Child onNotify={handleChildClick} />;
06}
07function Child({ onNotify }) {
08  return <button onClick={() => onNotify("Salom parent!")}>Yuborish</button>;
09}

14.2 Sibling Communication va Composition

Example

App.jsx
React JSXNusxalash
01function Parent() {
02  const [selected, setSelected] = useState(null);
03  return (
04    <>
05      <ItemList onSelect={setSelected} />
06      <ItemDetails item={selected} />
07    </>
08  );
09}

📝 Practice Exercises

🟡 Exercise 1 — Medium

Task: Ota komponentga xabar yuboradigan LikeButton yozing.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function ItemList() {
02  function selectItem(item) {
03    // ItemDetails'ga qanday yetkazish mumkin?
04  }
05  return <button onClick={() => selectItem("A")}>Tanlash</button>;
06}
07function ItemDetails() {
08  // item'ni qayerdan olish kerak?
09}

Your Task: Ikkala komponent bir-biridan bexabar. Buni qanday tuzatish mumkin?

<details> <summary>Solution</summary> State'ni umumiy parentga ko'tarish kerak: ```jsx function Parent() { const [item, setItem] = useState(null); return ( <> <ItemList onSelect={setItem} /> <ItemDetails item={item} /> </> ); } ``` </details>

📌 Chapter Summary

Props — pastga, callback funksiyalar — yuqoriga. Sibling'lar bevosita emas, umumiy parent orqali gaplashadi.

🎯 Key Takeaways

• Props pastga, callback'lar yuqoriga
• Sibling communication — umumiy parent orqali
• Ma'lumot oqimi har doim bir yo'nalishli

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01// Child -> Parent
02<Child onAction={(data) => handleAction(data)} />
03 
04// Sibling <-> Sibling (umumiy parent orqali)
05<A onSelect={setShared} /> <B value={shared} />

---