Пропси на компоненти в React

В предишния урок показахме няколко екземпляра от продукти:

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

Засега всяко извикване на тага за продукт показва едно и също нещо на екрана. Нека сега направим всеки продукт уникален.

Нека, например, всеки продукт трябва да има име и цена. Нека направим така, че всяко извикване на тага за продукт да показва продукт със собствено име и цена, форматирани в желания от нас верстка.

За да направим това, трябва да изпълним няколко стъпки.

Първо, при извикване на тага за продукт, в този таг ще напишем два атрибута: атрибут name с името на продукта и атрибут cost с цената, ето така:

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

Имената и стойностите на тези атрибути ще влязат под формата на обект в първия параметър на функцията-конструктор на нашия компонент Product:

function Product(props) {
	console.log(props); // обект с ключове name и cost
	
	return <p>
		product
	</p>;
}

Името на параметъра може да бъде каквото и да е, но в React е прието да се нарича props. Всъщност това не е просто име на параметър, а важна концепция в React.

Същността на тази концепция е следната: при извикване на таг на компонент в този таг могат да се записват атрибути с данни. Тези данни ще влязат в пропсите на компонента. След това компонентът може да използва тези данни, например, за създаване на желаната верстка.

Нека направим това:

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

По-удобно и по-прието е да не се използва обектът props, а веднага да се извърши деструктуриране на пропсите директно в параметрите на функцията:

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

Направете компонент Employee, който показва данните на служител на екрана. Нека тези данни са фамилия, име, презиме и заплата. Форматирайте тези данни в желаната от вас верстка. Покажете в компонента App трима служители с различни данни.