React props — ma'lumot uzatish

Komponentlar darsida TaskList ichida uchta bir xil TaskItem chiqdi — hammasida “Non olish” yozuvi. Komponent foydali bo’lishi uchun har chaqiruvda boshqa ma’lumot olishi kerak. Props shu ish uchun.

Props — komponentga kiruvchi ma’lumot

Komponentga atribut kabi qiymat berasiz:

<TaskItem title="Non olish" />
<TaskItem title="Kitob o'qish" />

Komponent ularni funksiya parametri orqali oladi:

function TaskItem(props) {
  return <li>{props.title}</li>;
}

Ekranda:

• Non olish
• Kitob o'qish

Ya’ni bu chaqiruv:

<TaskItem title="Non olish" isDone={false} />

komponentga shunday obyekt beradi:

{ title: "Non olish", isDone: false }

Har xil turdagi qiymat uzatish

Matn tirnoq bilan, qolgan hamma narsa {} ichida:

<TaskItem
  title="Non olish"
  priority={3}
  isDone={false}
  tags={["uy", "xarid"]}
  author={{ name: "Aziz" }}
/>

Qiymat	Yozuv
Matn	`title="Non olish"`
Son	`priority={3}`
Mantiqiy	`isDone={false}`
Massiv	`tags={["uy", "xarid"]}`
Obyekt	`author={{ name: "Aziz" }}`

Destructuring — qulay yozuv

Har safar props. yozish zerikarli. props oddiy obyekt bo’lgani uchun ES6 destructuring ishlaydi:

function TaskItem({ title, isDone }) {
  return <li className={isDone ? "done" : "active"}>{title}</li>;
}

Bu yozuv bilan avvalgisi bir xil ishlaydi. Afzalligi — komponent qanday props kutayotgani birinchi qatordayoq ko’rinadi.

Amalda deyarli har doim destructuring ishlatiladi. Shu darsdan keyin biz ham shunday yozamiz.

Standart qiymat

Props berilmasa undefined keladi va ekranda bo’shliq qoladi. Buning oldini standart qiymat oladi:

function Badge({ text = "Yangi", color = "gray" }) {
  return <span className={`badge badge-${color}`}>{text}</span>;
}

Ishlatish:

<Badge />
<Badge text="Sotuvda" color="red" />

Hosil bo’ladigan HTML:

<span class="badge badge-gray">Yangi</span>
<span class="badge badge-red">Sotuvda</span>

Birinchi chaqiruvda props berilmadi — standart qiymatlar ishladi.

To’liq misol: vazifalar ro’yxati

Endi TaskList haqiqiy ma’lumot bilan ishlaydi:

// src/components/TaskItem.jsx
function TaskItem({ title, isDone = false }) {
  return (
    <li className={isDone ? "done" : "active"}>
      {title} {isDone && "✓"}
    </li>
  );
}

export default TaskItem;

// src/components/TaskList.jsx
import TaskItem from './TaskItem.jsx';

function TaskList() {
  return (
    <ul>
      <TaskItem title="Non olish" />
      <TaskItem title="Kitob o'qish" isDone={true} />
      <TaskItem title="Xat yozish" />
    </ul>
  );
}

export default TaskList;

Ekranda uchta har xil qator chiqadi, ikkinchisida belgi turadi va done klassi qo’llanadi. Uchta bir xil qator muammosi hal bo’ldi.

children — komponent ichidagi tarkib

Ba’zan komponentga alohida qiymat emas, butun bo’lak berish kerak. Masalan har xil tarkibni bir xil ramkaga solish.

Buning uchun tarkibni ochiluvchi va yopiluvchi teg orasiga yozasiz:

<Card title="Eslatma">
  <p>Ertaga soat 9 da uchrashuv.</p>
</Card>

Komponent uni children props orqali oladi:

// src/components/Card.jsx
function Card({ title, children }) {
  return (
    <div className="card">
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
    </div>
  );
}

export default Card;

Natijada:

<div class="card">
  <h3>Eslatma</h3>
  <div class="card-body"><p>Ertaga soat 9 da uchrashuv.</p></div>
</div>

children ichiga istalgan narsa kiradi — matn, bir nechta element, boshqa komponentlar:

<Card title="Foydalanuvchi">
  <img src="/avatar.png" alt="Avatar" />
  <p>Aziz</p>
  <Badge text="Faol" color="green" />
</Card>

Shu tufayli Card qanday tarkib kelishini bilishi shart emas — u faqat ramkani beradi.

Ma’lumot faqat pastga oqadi

React’da ma’lumot bir yo’nalishda harakat qiladi: ota-komponentdan bola-komponentga. Bola o’z props’ini yuqoriga o’zgartira olmaydi.

App
 └── TaskList        ← tasks bu yerda
      └── TaskItem   ← title, isDone pastga tushadi

Props o’zgarmas

Bola o’ziga kelgan props’ni o’zgartira olmaydi:

// ❌ Shunday yozmang
function TaskItem({ title, isDone }) {
  isDone = true;             // ma'nosiz
  title = title.trim();      // ham ma'nosiz
  return <li>{title}</li>;
}

Bu qatorlar xato bermaydi, lekin foydasi ham yo’q: siz faqat mahalliy nusxani o’zgartirdingiz. Ota-komponentdagi ma’lumot joyida qoladi va keyingi chizishda eski qiymat qaytib keladi.

Obyekt yoki massiv props’ni o’zgartirish esa haqiqiy zarar keltiradi:

// ❌ Juda yomon — ota-komponent ma'lumotini buzadi
function TagList({ tags }) {
  tags.push("yangi");
  return <p>{tags.join(", ")}</p>;
}

tags massivi ota-komponentniki. Uni o’zgartirsangiz React xabardor bo’lmaydi: ekran yangilanmaydi, lekin ma’lumot o’zgargan bo’ladi — ekran bilan ma’lumot bir-biridan ajraladi.

To’g’ri yo’l — yangi nusxa yasash:

// ✅ Asl massiv tegilmaydi
function TagList({ tags }) {
  const allTags = [...tags, "yangi"];
  return <p>{allTags.join(", ")}</p>;
}

Bu funksional dasturlash darsidagi o’zgarmaslik qoidasining o’zi.

Props nomini qanday tanlash

Inglizcha va mazmunli: title, price, isActive.
Mantiqiy qiymat savol shaklida: isDone, hasError, canEdit.
Ro’yxat ko’plikda: tasks, tags, users.
HTML atributiga o’xshash bo’lsa, o’sha nomni oling: type, value, disabled — o’quvchiga tanish bo’ladi.

Amaliy mashq

TaskItem ni title va isDone props qabul qiladigan qilib yozing, TaskList dan uchta har xil vazifa uzating.
isDone ga standart qiymat false bering va bitta chaqiruvda uni umuman yozmay ko’ring.
priority props qo’shing va uni priority="3" deb tirnoq bilan uzating. Komponent ichida {priority + 1} chiqaring va natijaga qarang. Keyin priority={3} ga almashtiring.
Card komponenti yozing: title props va children qabul qilsin. Ichiga matn, rasm va tugma joylab sinab ko’ring.
Badge komponenti yozing: text va color props, ikkalasiga ham standart qiymat. Uni props’siz va props bilan chaqiring.
TaskItem ichida title = "O'zgardi" deb yozib ko’ring va ekranda nima bo’lishini kuzating — keyin o’chiring.

3-qadam eng ko’p uchraydigan chalkashlikni ko’rsatadi: "3" + 1 ning natijasi "31" bo’ladi, chunki tirnoqdagi qiymat matn.

Qisqacha xulosa

Props — komponentga tashqaridan beriladigan ma’lumot; React ularni bitta obyektga yig’ib uzatadi.
Matn tirnoq bilan, son/mantiqiy/massiv/obyekt {} ichida beriladi — priority="3" matn qaytaradi.
Destructuring ({ title, isDone }) komponent nimani kutayotganini birinchi qatordayoq ko’rsatadi.
Standart qiymat props berilmaganda ishlaydi: text = "Yangi".
children — ochiluvchi va yopiluvchi teg orasidagi tarkib; ramka komponentlari shu bilan yoziladi.
Ma’lumot faqat yuqoridan pastga oqadi — noto’g’ri qiymat sababini tepadan qidiring.
Props o’zgarmas: bola uni o’zgartirmaydi, obyekt va massivga ham qo’l tegizmaydi.

Keyingi darsda ro’yxat chizish va key — uchta TaskItem ni qo’lda yozish o’rniga massivdan hosil qilish.