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

← →
↑