Propsat e Komponenteve në React

Në mësimin e mëparshëm kemi shfaqur disa instanca të produkteve:

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

Tani për tani çdo thirrje e tagut të produktit shfaq në ekran të njëjtën gjë. Tani le ta bëjmë çdo produkt unik.

Le të themi, për shembull, se çdo produkt duhet të ketë emër dhe çmim. Le ta bëjmë kështu që çdo thirrje e tagut të produktit të shfaqë një produkt me emrin dhe çmimin e vet, të formatuar në formatimin e dëshiruar.

Për këtë duhet të ndërmarrim disa hapa.

Për fillim, gjatë thirrjes së tagut të produktit në këtë tag do të shkruajmë dy atribute: atributin name me emrin e produktit dhe atributin cost me çmimin, si kështu:

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

Emrat dhe vlerat e këtyre atributeve do të shkojnë në formën e një objekti në parametrin e parë të funksionit-konstruktor të komponentit tonë Product:

function Product(props) {
	console.log(props); // objekt me çelësat name dhe cost
	
	return <p>
		product
	</p>;
}

Emri i parametrit mund të jetë çfarëdo, por në React është e zakonshme ta quajmë atë props. Në fakt ky nuk është thjesht një emër parametri, por një koncept i rëndësishëm i React.

Thelbi i këtij koncepti është si vijon: gjatë thirrjes së tagut të komponentit në këtë tag mund të shkruhen atribute me të dhëna. Këto të dhëna do të shkojnë në propsat të komponentit. Pastaj komponenti mund t'i përdorë këto të dhëna, për shembull, për të krijuar formatimin e dëshiruar.

Le ta bëjmë këtë:

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

Më praktik dhe më e pranuar është të mos përdoret objekti props, por menjëherë të kryhet destrukturosimi i propsave direkt në parametrat e funksionit:

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

Bëni një komponent Employee, që shfaq të dhënat e një punonjësi në ekran. Le të jenë këto të dhëna mbiemri, emri, emri i prindit dhe paga. Formatoni këto të dhëna në formatimin që dëshironi. Shfaqni në komponentin App tre punonjës me të dhëna të ndryshme.