Props komponenti u Reactu

U prethodnoj lekciji prikazali smo nekoliko instanci proizvoda:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

Za sada svaki poziv taga sa proizvodom prikazuje istu stvar na ekranu. Hajde sada da napravimo svaki proizvod jedinstvenim.

Neka, na primer, svaki proizvod ima naziv i cenu. Učinimo da svaki poziv taga sa proizvodom prikazuje proizvod sa svojim imenom i cenom, formatiranim u željeni izgled.

Za ovo moramo da pređemo nekoliko koraka.

Za početak, prilikom poziva taga sa proizvodom, u ovaj tag ćemo pisati dva atributa: atribut name sa nazivom proizvoda i atribut cost sa cenom, ovako:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

Imena i vrednosti ovih atributa će doći u obliku objekta u prvi parametar funkcije-konstruktora naše komponente Product:

jsxfunction Product(props) {
  console.log(props); // objekat sa ključevima name i cost
  
  return <p>
    product
  </p>;
}

Ime parametra može biti bilo koje, ali u Reactu je uobičajeno da se zove props. U stvari, ovo nije samo ime parametra, već važan koncept Reacta.

Suština ovog koncepta je sledeća: prilikom poziva taga komponente u ovaj tag se mogu upisivati atributi sa podacima. Ovi podaci će doći u props komponente. Zatim komponenta može da koristi ove podatke, na primer, za kreiranje željenog izgleda.

Hajde da to uradimo:

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

Pogodnije i prihvaćenije je ne koristiti objekat props, već odmah izvršiti destrukturiranje props direktno u parametrima funkcije:

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