Kalimi i state-ve në komponentët fëmijë në React

Le të themi se kemi një grup me produkte:

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

Le të themi se ky grup ndodhet në komponentin Products. Le t'i shkruajmë këto produkte në state e komponentit:

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

Tani le të përsërisim produktet me një cikël dhe t'i shfaqim ato në një formë të caktuar:

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

Siç e shihni, përmbajtja e ciklit tonë map është mjaft e ndërlikuar, veçanërisht nëse struktura e produktit rritet në të ardhmen. Një kompleksitet i tillë e vështirëson leximin, kuptimin dhe mbajtjen e kodit.

Do të ishte më mirë të nxirret kodi përgjegjës për shfaqjen e produktit në një komponent të veçantë. Le ta quajmë atë Product. Ja kodi i komponentit tonë:

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

Tani le të përdorim brenda komponentit Products në ciklin map komponentët fëmijë 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>;
}

Siç e shihni, tani kodi i ciklit u thjeshtua dhe u bë më i kuptueshëm. Përveç kësaj, tani për shfaqjen e produktit përgjigjet një komponent i veçantë, në të cilin ne mund të bëjmë, dhe pastaj të modifikojmë strukturën e produkteve.

Në mënyrë teknike, kemi që komponenti prind ka state me të dhëna, ndërsa komponentët fëmijë i marrin këto të dhëna në formë të props dhe i shfaqin ato në mënyrën e dëshiruar.

Në state të komponentit Users është dhënë grupi i mëposhtëm:

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

Përsërisni këtë grup me cikël dhe shfaqni të gjithë përdoruesit në ekran. Krijoni një komponent të veçantë User për shfaqjen e përdoruesit.