Chapter 5 — Props

Komponentlar mustaqil bo'laklar. Ularga tashqaridan ma'lumot uzatish uchun — props ishlatiladi.

---

5.1 Props Asoslari

Simple Explanation

Props — parentdan childga uzatiladigan, faqat o'qish uchun (read-only) ma'lumot.

Example

App.jsx
React JSXNusxalash
01function UserCard({ name, age }) {
02  return <p>{name} — {age} yosh</p>;
03}
04 
05<UserCard name="Abbos" age={26} />

Why Does It Exist?

Agar har bir komponent faqat statik ma'lumot ko'rsatsa, uni qayta ishlatib bo'lmaydi. Props komponentga tashqaridan turli ma'lumot berish, uni "shablon" sifatida qayta ishlatish imkonini beradi.

5.2 Default Qiymat va children

Example

App.jsx
React JSXNusxalash
01function Avatar({ src = "/default.png" }) {
02  return <img src={src} />;
03}
04 
05function Card({ children }) {
06  return <div className="card">{children}</div>;
07}

5.3 Props Immutability

Simple Explanation

Props hech qachon komponent ichida o'zgartirilmaydi — ular faqat o'qiladi.

⚠️ Common Mistake

App.jsx
React JSXNusxalash
01function Profile(props) {
02  props.name = props.name.toUpperCase(); // XATO — mutation
03  return <h2>{props.name}</h2>;
04}

✅ To'g'ri yechim

App.jsx
React JSXNusxalash
01function Profile({ name }) {
02  const upperName = name.toUpperCase();
03  return <h2>{upperName}</h2>;
04}

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: name va role props qabul qiluvchi EmployeeCard yarating.

🟡 Exercise 2 — Medium

Task: children prop orqali istalgan kontentni ko'rsata oladigan Modal komponenti yarating.

🐛 Debugging Challenge

App.jsx
React JSXNusxalash
01function Profile(props) {
02  props.name = props.name.toUpperCase();
03  return <h2>{props.name}</h2>;
04}

Your Task: Nega bu kod React qoidalariga zid?

<details> <summary>Solution</summary> Props'ni to'g'ridan-to'g'ri o'zgartirish (mutation) React'ning immutability tamoyilini buzadi. To'g'ri yechim — yangi lokal o'zgaruvchi yaratish: ```jsx function Profile({ name }) { const upperName = name.toUpperCase(); return <h2>{upperName}</h2>; } ``` </details>

📌 Chapter Summary

Props — parentdan childga uzatiladigan read-only ma'lumot. children — komponentga ixtiyoriy JSX kontent uzatish usuli. Props hech qachon mutate qilinmaydi.

🎯 Key Takeaways

• Props faqat parentdan childga, bir yo'nalishda oqadi
• Props har doim immutable
• children — composition uchun kuchli vosita
• Default qiymatlar prop berilmaganda ishlaydi

⚡ Quick Cheat Sheet

App.jsx
React JSXNusxalash
01function Component({ prop1, prop2 = "default" }) { ... }
02<Component prop1="value" prop2={42} />
03function Wrapper({ children }) { return <div>{children}</div>; }

---