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 компоненти яратинг.