Olekute edastamine alamkomponentidesse Reactis

Oletame, et meil on toodete massiiv:

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

Oletame, et see massiiv asub komponendis Products. Kirjutame need tooted komponendi olekusse:

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

Nüüd loome toodete üle tsükli ja kuvame need mingis kujunduses:

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

Nagu näete, on meie map-tsükli sisu piisavalt keeruline, eriti kui toote kujundus edaspidi laieneb. Selline keerukus raskendab koodi lugemist, mõistmist ja hooldust.

Oleks parem eraldada toote kuvamise eest vastutav kood eraldi komponendiks. Nimetame selle Product. Siin on meie komponendi kood:

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

Kasutagem nüüd komponendi Products sees map-tsüklis alamkomponente 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>;
}

Nagu näete, on tsükli kood nüüd lihtsustunud ja muutunud arusaadavamaks. Lisaks vastutab toote kuvamise eest nüüd eraldi komponent, kus saame luua ja seejärel muuta toodete kujundust.

Tehniliselt saame sellise tulemuse, et vanemkomponendil on andmetega olek ning alamkomponendid saavad need andmed propsidena ja kuvavad need meile vajalikul viisil.

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