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},
];