Пренос на состојби во деца компоненти во 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.