Создание дочерних компонентов в 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>;
}

Сделайте компонент User, выводящий данные юзера на экран. Пусть этими данными будут имя, фамилия, возраст. Оформите данные юзера в виде тега tr, содержащего три тега td.

В компоненте App дан следующий массив:

const users = [
	{id: id(), name: 'user1', surn: 'surn1', age: 30},
	{id: id(), name: 'user2', surn: 'surn2', age: 31},
	{id: id(), name: 'user3', surn: 'surn3', age: 32},
];

С помощью этого массива выведите трех юзеров. Оформите их вывод в виде таблицы table.

Компоненты в цикле

Давайте теперь выведем наши компоненты в цикле. Используем для этого метод 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>;
}

Модифицируйте предыдущую задачу так, чтобы юзеры выводились через цикл.