Перадача стэйтаў у даччыныя кампаненты ў 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);
}

Цяпер давайце перабярэм прадукты цыклам і вывядзем іх у якой-небудзь вёрстцы:

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 дастаткова складанае, асабліва калі вёрстка прадукта разрасцеся ў далейшым. Такая складанасць ускладняе чытанне, разуменне і падтрымку кода.

Будзе лепш вынесці код, які адказвае за адлюстраванне прадукта ў асобны кампанент. Назовем яго 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>;
}

Як вы бачыце, цяпер код цыкла спрасціўся і стаў больш зразумелым для разумення. Акрамя таго, цяпер за адлюстраванне прадукта адказвае асобны кампанент, у якім мы можам рабіць, а потым рэдагаваць вёрстку прадуктаў.

Тэхнічна ў нас атрымліваецца, што бацькоўскі кампанент мае стэйт з данымі, а даччыныя кампаненты атрымліваюць гэтыя даныя ў выглядзе пропсаў і адлюстроўваюць іх патрэбным нам чынам.

У стэйце кампанента 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.