Transmiterea stărilor în componentele copil în React

Să presupunem că avem o matrice cu produse:

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

Să presupunem că această matrice este localizată în componenta Products. Să înregistrăm aceste produse în starea componentei:

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

Acum să iterăm prin produse cu bucla și să le afișăm într-o structură oarecare:

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

După cum vedeți, conținutul buclei noastre map este suficient de complex, mai ales dacă structura produsului va crește în viitor. O astfel de complexitate îngreunează citirea, înțelegerea și întreținerea codului.

Ar fi mai bine să mutați codul responsabil pentru afișarea produsului într-o componentă separată. Să o numim Product. Iată codul componentei noastre:

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

Acum să folosim în interiorul componentei Products în bucla map componentele copil 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>;
}

După cum vedeți, acum codul buclei a devenit mai simplu și mai ușor de înțeles. În plus, acum afișarea produsului este responsabilitatea unei componente separate, în care putem crea, apoi edita structura produselor.

Din punct de vedere tehnic, rezultă că componenta părinte are starea cu date, iar componentele copil primesc aceste date sub formă de props și le afișează în modul dorit de noi.

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