Props-urile componentelor în React

În lecția precedentă am afișat mai multe exemple de produse:

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

Momentan, fiecare apel al tag-ului cu produs afișează același lucru. Să facem acum fiecare produs unic.

Să presupunem, de exemplu, că fiecare produs trebuie să aibă un nume și un preț. Să facem ca fiecare apel al tag-ului cu produs să afișeze un produs cu propriul său nume și preț, formatate în markup-ul de care avem nevoie.

Pentru aceasta, trebuie să parcurgem câțiva pași.

Pentru început, la apelul tag-ului cu produs, vom scrie în acest tag două atribute: atributul name cu numele produsului și atributul cost cu prețul, astfel:

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

Numele și valorile acestor atribute vor ajunge sub formă de obiect în primul parametru al funcției-constructor a componentei noastre Product:

function Product(props) {
	console.log(props); // obiect cu cheile name și cost
	
	return <p>
		product
	</p>;
}

Numele parametrului poate fi oricare, dar în React se obișnuiește să fie numit props. De fapt, acesta nu este doar un nume de parametru, ci o conceptie importantă în React.

Esența acestei concepții este următoarea: la apelul tag-ului componentei, în acest tag se pot scrie atribute cu date. Aceste date vor ajunge în props-urile componentei. Apoi componenta poate folosi aceste date, de exemplu, pentru a crea markup-ul necesar.

Să facem acest lucru:

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

Este mai convenabil și mai acceptat să nu folosim obiectul props, ci să efectuăm imediat destructurarea props-urilor direct în parametrii funcției:

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

Creați o componentă Employee care afișează datele unui angajat pe ecran. Să fie aceste date numele, prenumele, patronimicul și salariul. Formatați aceste date în markup-ul dorit. Afișați în componenta App trei angajați cu date diferite.