Prosleđivanje stanja (state) podređenim komponentama u React-u

Neka nam je dat niz sa proizvodima:

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

Neka se ovaj niz nalazi u komponenti Products. Upisaćemo ove proizvode u stanje komponente:

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

Sada hajde da prođemo kroz proizvode petljom i prikažemo ih u nekom izgledu:

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

Kao što vidite, sadržaj naše petlje map je prilično složen, posebno ako se izgled proizvoda proširi kasnije. Takva složenost otežava čitanje, razumevanje i održavanje koda.

Bilo bi bolje izdvojiti kod koji je odgovoran za prikaz proizvoda u zasebnu komponentu. Nazvaćemo je Product. Evo koda naše komponente:

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

Hajde da sada unutar komponente Products u petlji map koristimo podređene komponente 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>;
}

Kao što vidite, kod petlje se sada pojednostavio i postao razumljiviji. Osim toga, sada za prikaz proizvoda je odgovorna zasebna komponenta, u kojoj možemo da pravimo, a kasnije i uređujemo izgled proizvoda.

Tehnički, ispostavlja se da roditeljska komponenta ima stanje (state) sa podacima, a podređene komponente primaju te podatke u obliku props-a i prikazuju ih na način koji nama odgovara.

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