Создание дочерних компонентов в React

В атрибуты тегов компонента можно передавать не только строки, но и выполнять вставку переменных и констант:

function App() {
const name = 'product';
const cost = '100';

return <div>
<Product name={name} cost={cost} />
</div>;
}
Давайте сделаем сразу несколько продуктов:

function App() {
const name1 = 'product1';
const cost1 = '100';

const name2 = 'product2';
const cost2 = '100';

const name3 = 'product3';
const cost3 = '100';

return <div>
<Product name={name1} cost={cost1} />
<Product name={name2} cost={cost2} />
<Product name={name3} cost={cost3} />
</div>;
}


Массив
Пусть у нас есть массив с продуктами:

const prods = [
{id: id(), name: 'product1', cost: 100},
{id: id(), name: 'product2', cost: 200},
{id: id(), name: 'product3', cost: 300},
];
Давайте выведем на экран три компонента Product, передав им в пропсы данные из нашего массива. Пока не будем использовать цикл, а просто будем обращаться к элементам массива и объекта:

function App() {
return <div>
<Product name={prods[0].name} cost={prods[0].cost} />
<Product name={prods[1].name} cost={prods[1].cost} />
<Product name={prods[2].name} cost={prods[2].cost} />
</div>;
}

Компоненты в цикле
Давайте теперь выведем наши компоненты в цикле. Используем для этого метод map:

function App() {
const result = prods.map(prod => {
return <Product name={prod.name} cost={prod.cost} />;
});

return <div>
{result}
</div>;
}
Не забудем указать атрибут key:

function App() {
const result = prods.map(prod => {
return <Product key={prod.id} name={prod.name} cost={prod.cost} />;
});

return <div>
{result}
</div>;
}