Állapotok átadása gyermek komponenseknek a React-ban

Tegyük fel, hogy van egy termékek tömbünk:

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

Tegyük fel, hogy ez a tömb a Products komponensben található. Írjuk be ezeket a termékeket a komponens állapotába:

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

Most nézzük végig a termékeket egy ciklussal és jelenítsük meg őket valamilyen felépítésben:

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

Amint látod, a map ciklusunk tartalma elég bonyolult, főleg ha a termék felépítése a jövőben tovább bővül. Ez a bonyolultság megnehezíti a kód olvasását, megértését és karbantartását.

Jobb lenne kiszervezni a termék megjelenítéséért felelős kódot egy külön komponensbe. Nevezzük el Product-nek. Itt a komponensünk kódja:

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

Most használjunk a Products komponensen belül a map ciklusban Product gyermek komponenseket:

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

Amint látod, a ciklus kódja leegyszerűsödött és áttekinthetőbbé vált. Ezen kívül most már egy külön komponens felelős a termék megjelenítéséért, ahol elkészíthetjük, majd később szerkeszthetjük a termékek felépítését.

Technikailag az a helyzet, hogy a szülő komponens rendelkezik az adatokat tartalmazó állapottal, míg a gyermek komponensek ezeket az adatokat props-ként kapják meg és jelenítik meg az általunk kívánt módon.

A Users komponens állapotában a következő tömb található:

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

Menj végig ezen a tömbön egy ciklussal és jelenítsd meg az összes felhasználót a képernyőn. Hozz létre a felhasználó megjelenítéséhez egy külön User komponenst.