Props komponentů v Reactu

V předchozí lekci jsme zobrazili několik instancí produktů:

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

Zatím každé volání tagu s produktem zobrazuje na obrazovce to samé. Nyní uděláme každý produkt unikátní.

Nechť má například každý produkt název a cenu. Udělejme to, aby každé volání tagu s produktem zobrazovalo produkt s vlastním názvem a cenou, naformátované do požadovaného HTML.

K tomu musíme provést několik kroků.

Nejprve při volání tagu s produktem do tohoto tagu zapíšeme dva atributy: atribut name s názvem produktu a atribut 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 atributů budou předány jako objekt do prvního parametru funkce-konstruktoru naší komponenty Product:

function Product(props) {
	console.log(props); // objekt s klíči name a cost
	
	return <p>
		product
	</p>;
}

Název parametru může být jakýkoli, ale v Reactu je zvykem jej nazývat props. Ve skutečnosti to není jen název parametru, ale důležitá koncept Reactu.

Podstata této konceptu je následující: při volání tagu komponenty do tohoto tagu lze zapisovat atributy s daty. Tato data budou předána do props komponenty. Poté komponenta může tato data použít, například pro vytvoření požadovaného HTML.

Pojďme to udělat:

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

Pohodlněji a častěji se nepoužívá objekt props, ale rovna se provádí destrukturalizace props přímo v parametrech funkce:

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

Vytvořte komponentu Employee, zobrazující data zaměstnance na obrazovce. Nechť těmito daty jsou příjmení, jméno, střední jméno a plat. Naformátujte tato data do vámi požadovaného HTML. Zobrazte v komponentě App tři zaměstnance s různými daty.