Props komponentov v React

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

function 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:

function 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:

function 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:

function 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:

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

Vytvorte komponent Employee, ktorý zobrazí údaje zamestnanca na obrazovke. Nech týmito údajmi budú priezvisko, meno, stredné meno a plat. Naformátujte tieto údaje do vámi zvolenej štruktúry. Zobrazte v komponente App troch zamestnancov s rôznymi údajmi.