Komponentprops i React

I den forrige lektion viste vi flere instanser af produkter:

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

Indtil videre viser hvert kald af produkt-tagget det samme på skærmen. Lad os nu gøre hvert produkt unikt.

Lad os for eksempel sige, at hvert produkt skal have et navn og en pris. Lad os sørge for, at hvert kald af produkt-tagget viser et produkt med sit eget navn og pris, formateret i den ønskede HTML-struktur.

For at gøre dette skal vi gennemføre flere trin.

Til at starte med, når vi kalder produkt-tagget, vil vi tilføje to attributter til dette tag: en attribut name med produktets navn og en attribut cost med prisen, sådan her:

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

Navnene og værdierne af disse attributter vil blive sendt som et objekt til den første parameter af vores komponentfunktion Product:

function Product(props) {
	console.log(props); // objekt med nøglerne name og cost
	
	return <p>
		product
	</p>;
}

Parameternavnet kan være hvad som helst, men i React er det almindeligt at kalde det props. Dette er faktisk ikke blot et parameternavn, men en vigtig koncept i React.

Essensen af dette koncept er følgende: når man kalder et komponenttag, kan man tilføje attributter med data til dette tag. Disse data vil blive sendt til komponentets props. Derefter kan komponentet bruge disse data, for eksempel til at opbygge den ønskede HTML-struktur.

Lad os gøre dette:

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

Det er mere bekvemt og mere almindeligt ikke at bruge props-objektet direkte, men i stedet umiddelbart at udføre destrukturering af props direkte i funktionens parametre:

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

Lav en komponent Employee, der viser en medarbejders data på skærmen. Lad disse data være efternavn, fornavn, mellemnavn og løn. Formatér disse data i den HTML-struktur, du ønsker. Vis tre medarbejdere med forskellige data i komponentet App.