Kupeleka Steti kwa Vijenzi Vinavyotegemea katika React

Acha tuwe na safu ya bidhaa:

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

Acha safu hii iwe katika kijenzi Products. Tuandike bidhaa hizi katika hali ya kijenzi:

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

Sasa tuzungushe bidhaa kwa kitanzi na tuzionyeshe katika muundo wowote:

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

Kama unavyoona, yaliyomo kwenye kitanzi chetu map ni ngumu sana, hasa ikiwa muundo wa bidhaa utaongezeka baadaye. Ugumu kama huo huwaongezea shida kusoma, kuelewa na kudumisha msimbo.

Ni bora kutenga msimbo unaohusika na kuonyesha bidhaa kwenye kijenzi tofauti. Tukiite Product. Huu ndio msimbo wa kijenzi chetu:

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

Sasa tupate ndani ya kijenzi Products katika kitanzi map tutumie vijenzi vinavyotegemea 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>;
}

Kama unavyoona, sasa msimbo wa kitanzi umerahisishwa na umekuwa rahisi kueleweka. Zaidi ya hayo, sasa kuonyesha bidhaa kunafanyika na kijenzi tofauti, ambacho tunaweza kufanya, kisha kuhariri muundo wa bidhaa.

Kitaalamu imetupatia kuwa kijenzi kikuu kina steti na data, na vijenzi vinavyotegemea vinapata data hizi kama props na kuzionyesha kwa njia tunayotaka.

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