Reactда стейтларни болалар компонентларига ўтказиш

Фарз қилайлик, бизда маҳсулотлар массиви берилган:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

Фарз қилайлик, бу массив Products компонентида жойлашган. Ушбу маҳсулотларни компонентнинг ҳолатига ёзайлик:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

Энди маҳсулотларни цикл билан айлантириб, уларни қандайдир версткада чиқарайлик:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      name: <span>{prod.name}</span>,
      cost: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

Кўриб турганингиздек, бизнинг map циклимизнинг ички мазмуни жуда мураккаб, айниқса маҳсулотнинг версткаси келажакда янада кенгайса. Бундай мураккаблик кодни ўқиш, тушуниш ва унга қўллаб-қувватлашни қийинлаштиради.

Маҳсулотни кўрсатиш учун жавоб берувчи кодни алохида компонентга чиқариб олиш яхшироқ бўлар эди. Уни Product деб атаймиз. Бизнинг компонентнинг коди:

jsxfunction Product({ name, cost }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </div>;
}

Энди Products компоненти ичида map циклида болалар Product компонентларидан фойдаланамиз:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

Кўриб турганингиздек, энди цикл коди соддалашди ва тушуниш учун янада оңой бўлди. Бундан ташқари, энді маҳсулотни кўрсатиш учун алохида компонент жавоб беради, бунда биз маҳсулотларнинг версткасини ясашимиз, сўнгра таҳрирлашимиз мумкин.

Техник жиҳатдан бизда ота-она компонент маълумотлар билан стейтга эга, болалар компонентлар эса ушбу маълумотларни пропслар шаклида оладилар ва уларни бизга керакли тарзда кўрсатадилар.

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];