React-də valideyn komponentlərdən uşaq komponentlərə state-lərin ötürülməsi

Tutaq ki, bizə məhsullardan ibarət bir massiv verilib:

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

Tutaq ki, bu massiv Products komponentində yerləşir. Gəlin bu məhsulları komponentin state-inə yazaq:

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

İndi gəlin məhsulları tsikl ilə gəzib və onları bir növ HTML quruluşunda çıxaraq:

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ördüyünüz kimi, bizim map tsiklimizin məzmunu kifayət qədər mürəkkəbdir, xüsusən də məhsulun HTML quruluşu gələcəkdə daha da genişlənərsə. Bu mürəkkəblik kodu oxumağı, başa düşməyi və dəstəkləməni çətinləşdirir.

Məhsulun göstərilməsinə cavabdeh olan kodu ayrı bir komponentə çıxarmaq daha yaxşı olardı. Onu Product adlandıraq. Budur bizim komponentin kodu:

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

Gəlin indi Products komponentinin daxilində map tsiklində uşaq Product komponentlərindən istifadə edək:

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ördüyünüz kimi, indi tsiklin kodu sadələşdi və başa düşmək üçün daha aydın oldu. Bundan əlavə, indi məhsulun göstərilməsinə ayrı bir komponent cavabdehdir, hansında ki, biz məhsulların HTML quruluşunu edə bilərik, sonradan isə onu redaktə edə bilərik.

Texniki cəhətdən belə nəticəyə gəlirik ki, valideyn komponent məlumatları olan state-ə malikdir, uşaq komponentlər isə bu məlumatları props-lar şəklində alır və onları bizim istədiyimiz şəkildə göstərir.

Users komponentinin state-ində aşağıdakı massiv verilib:

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 massivi tsikl ilə gəzin və bütün istifadəçiləri ekranda göstərin. İstifadəçinin göstərilməsi üçün ayrı bir User komponenti yaradın.