Komponens props-ok a React-ben

Az előző leckében több termékpéldányt jelenítettünk meg:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Egyelőre minden termékcímke hívás ugyanazt jeleníti meg a képernyőn. Tegyük most egyedivé az egyes termékeket.

Tegyük fel például, hogy minden terméknek legyen neve és ára. Úgy fogjuk beállítani, hogy minden termékcímke hívás egy adott névvel és árral rendelkező terméket jelenítsen meg, a számunkra megfelelő formázásban.

Ehhez több lépést kell megtennünk.

Először is, a termékcímke hívásakor ebbe a címkébe két attribútumot írunk: a name attribútumot a termék nevével és az cost attribútumot az árral, így:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Ezen attribútumok nevei és értékei egy objektum formájában kerülnek a Product komponensünk konstruktor függvényének első paraméterébe:

function Product(props) {
	console.log(props); // name és cost kulcsokkal rendelkező objektum
	
	return <p>
		product
	</p>;
}

A paraméter neve tetszőleges lehet, de a React-ban szokás props-nak nevezni. Ez valójában nem csupán egy paraméter neve, hanem egy fontos React koncepció.

Ennek a koncepciónak a lényege a következő: a komponens címke hívásakor ebbe a címkébe adattartalmú attribútumokat írhatunk. Ezek az adatok a komponens props-aiba kerülnek. Ezután a komponens felhasználhatja ezeket az adatokat, például a kívánt formázás létrehozásához.

Tegyük ezt meg:

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

Kényelmesebb és elfogadottabb nem az props objektumot használni, hanem egyből végrehajtani a destruktúrálást a props-okon közvetlenül a függvény paraméterein belül:

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

Készítsen egy Employee komponenst, amely egy alkalmazott adatait jeleníti meg a képernyőn. Legyenek ezek az adatok a vezetéknév, keresztnév, középső név és fizetés. Formázza ezeket az adatokat az Ön számára megfelelő módon. Jelenítsen meg a App komponensben három, különböző adatokkal rendelkező alkalmazottat.