React-da döwletleri çaga komponentlere geçirmek

Bizde önümleriň massiwy bolsun:

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

Bu massiw Products komponentinde ýerleşýär diýeliň. Bu önümleri komponentiň ýagdaýyna ýazalyň:

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

Indi önümleri aýlaw bilen gezip, olary nähili bir wersiýada görkezeliň:

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>;
}

Görşüňiz ýaly, bizim map aýlawymyzyň mazmuny eýýäm kyn, esasanam önümiň wersiýasy soňra giňelensoň. Beýle bir kynlyk kody okamagy, düşünmegi we goldamagy kynlaşdyrýar.

Önümi görkezmek üçin jogap berýän kody aýratyn komponente çykarmak gowy bolar. Onuň adyna Product diýeliň. Bizim komponentiň kody şeýle:

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

Indi Products komponentiniň içinde map aýlawynda çaga komponentler Product ulanyň:

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>;
}

Görşüňiz ýaly, indi aýlawyň kody ýönekeýleşdi we düşünmek üçin has aňsat boldy. Şeýle hem, indi önümi görkezmek üçin aýratyn komponent jogap berýär, onda biz önümleriň wersiýasyny edip, soňra üýtgedip bilýäris.

Tehniki taýdan, bizde ata komponentde maglumatlar bilen döwlet bar, çaga komponentler bolsa bu maglumatlary props görnüşinde alyp, olary biz isleýän görnüşde görkezýärler.

Users komponentiniň ýagdaýynda aşakdaky massiw berlen:

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},
];

Bu massiwy aýlaw bilen gezip, ähli ulanyjylary ekrana görkeziň. Ulanyjy görkezmek üçin aýratyn User komponentini dörediň.