Прослеђивање стања у подређене компоненте у 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.