Props komponentov v React

V predchádzajúcej lekcii sme zobrazili niekoľko inštancií produktov:

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

Zatiaľ každé volanie tagu s produktom zobrazuje na obrazovke to isté. Teraz urobme každý produkt jedinečným.

Nech má každý produkt napríklad názov a cenu. Urobme to tak, aby každé volanie tagu s produktom zobrazovalo produkt so svojím menom a cenou, formátovanými do potrebnej štruktúry.

Na to musíme urobiť niekoľko krokov.

Na začiatok pri volaní tagu s produktom do tohto tagu napíšeme dva atribúty: atribút name s názvom produktu a atribút cost s cenou, takto:

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

Názvy a hodnoty týchto atribútov budú prechádzať vo forme objektu do prvého parametra funkcie-konštruktora nášho komponentu Product:

jsxfunction Product(props) {
  console.log(props); // objekt s kľúčmi name a cost
  
  return <p>
    product
  </p>;
}

Názov parametra môže byť ľubovoľný, ale v React je zvykom nazvať ho props. V skutočnosti to nie je len názov parametra, ale dôležitá koncept Reactu.

Podstata tejto konceptu je nasledovná: pri volaní tagu komponentu do tohto tagu je možné zapísať atribúty s dátami. Tieto údaje budú prechádzať do props komponentu. Potom komponent môže tieto údaje použiť, napríklad pre vytvorenie potrebnej štruktúry.

Urobme to:

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

Pohodlnejšie a viac akceptované je nepoužívať objekt props, ale okamžite vykonať destrukturalizáciu props priamo v parametroch funkcie:

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