Подаване на състояния към дъщерни компоненти в React

Да предположим, че имаме масив с продукти:

const initProds = [
	{id: id(), name: 'product1', cost: 100},
	{id: id(), name: 'product2', cost: 200},
	{id: id(), name: 'product3', cost: 300},
];

Да предположим, че този масив се намира в компонента Products. Запишем тези продукти в състоянието на компонента:

function Products() {
	const [prods, setProds] = useState(initProds);
}

Сега нека да обходим продуктите в цикъл и да ги изведем в някакъв вид HTML:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <div key={prod.id}>
			name: <span>{prod.name}</span>,
			cost: <span>{prod.cost}</span>
		</div>;
	});
	
	return <div>
		{items}
	</div>;
}

Както виждате, съдържанието на нашия цикъл map е достатъчно сложно, особено ако HTML-а на продукта се разрасне в бъдеще. Такава сложност затруднява четенето, разбирането и поддръжката на кода.

Ще е по-добре да изнесем кода, отговарящ за показването на продукта в отделен компонент. Ще го наречем Product. Ето кода на нашия компонент:

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

Сега нека вътре в компонента Products в цикъла map да използваме дъщерни компоненти Product:

function Products() {
	const [prods, setProds] = useState(initProds);
	
	const items = prods.map(prod => {
		return <Product
			key ={prod.id}
			name={prod.name}
			cost={prod.cost}
		/>;
	});
	
	return <div>
		{items}
	</div>;
}

Както виждате, сега кодът на цикъла се опрости и стана по-разбираем. Освен това, сега за показването на продукта отговаря отделен компонент, в който можем да правим, а след това да редактираме HTML-а на продуктите.

Технически се получава, че родителският компонент има състояние с данни, а дъщерните компоненти получават тези данни под формата на props и ги показват по начин, който ни е необходим.

В състоянието на компонента Users е даден следният масив:

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

Обходете този масив в цикъл и изведете всички потребители на екрана. Създайте за показването на потребител отделен компонент User.