Пропсы компонентов в 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 трех работников с разными данными.