Props komponenti u Reactu

U prethodnoj lekciji prikazali smo nekoliko instanci proizvoda:

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

Za sada svaki poziv taga sa proizvodom prikazuje istu stvar na ekranu. Hajde sada da napravimo svaki proizvod jedinstvenim.

Neka, na primer, svaki proizvod ima naziv i cenu. Učinimo da svaki poziv taga sa proizvodom prikazuje proizvod sa svojim imenom i cenom, formatiranim u željeni izgled.

Za ovo moramo da pređemo nekoliko koraka.

Za početak, prilikom poziva taga sa proizvodom, u ovaj tag ćemo pisati dva atributa: atribut name sa nazivom proizvoda i atribut cost sa cenom, ovako:

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

Imena i vrednosti ovih atributa će doći u obliku objekta u prvi parametar funkcije-konstruktora naše komponente Product:

function Product(props) {
	console.log(props); // objekat sa ključevima name i cost
	
	return <p>
		product
	</p>;
}

Ime parametra može biti bilo koje, ali u Reactu je uobičajeno da se zove props. U stvari, ovo nije samo ime parametra, već važan koncept Reacta.

Suština ovog koncepta je sledeća: prilikom poziva taga komponente u ovaj tag se mogu upisivati atributi sa podacima. Ovi podaci će doći u props komponente. Zatim komponenta može da koristi ove podatke, na primer, za kreiranje željenog izgleda.

Hajde da to uradimo:

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

Pogodnije i prihvaćenije je ne koristiti objekat props, već odmah izvršiti destrukturiranje props direktno u parametrima funkcije:

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

Napravite komponentu Employee koja prikazuje podatke o zaposlenom na ekranu. Neka ovi podaci budu prezime, ime, srednje ime i plata. Formatirajte ove podatke u željeni izgled. Prikažite u komponenti App tri zaposlena sa različitim podacima.