Komponent-props i React

I forrige leksjon viste vi flere instanser av produkter:

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

Foreløpig viser hver kall på produkt-taggen det samme på skjermen. La oss nå gjøre hvert produkt unikt.

La oss si at hvert produkt for eksempel skal ha et navn og en pris. La oss sørge for at hvert kall på produkt-taggen viser et produkt med sitt eget navn og pris, formatert i ønsket HTML-struktur.

For å oppnå dette må vi gjennomføre flere trinn.

Til å begynne med, når vi kaller produkt-taggen, skriver vi to attributter i denne taggen: attributten name med produktets navn og attributten cost med prisen, slik:

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

Navnene og verdiene til disse attributtene vil komme inn som et objekt i den første parameteren til funksjonskonstruktøren for vår Product-komponent:

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

Parameternavnet kan være hva som helst, men i React er det vanlig å kalle det props. Dette er faktisk ikke bare et parameternavn, men et viktig konsept i React.

Essensen av dette konseptet er som følger: når du kaller en komponent-tagg, kan du skrive attributter med data i denne taggen. Disse dataene vil komme inn i komponentens props. Deretter kan komponenten bruke disse dataene, for eksempel for å opprette ønsket HTML-struktur.

La oss gjøre dette:

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

Det er mer praktisk og mer vanlig å ikke bruke props-objektet direkte, men umiddelbart utføre destrukturering av props direkte i funksjonsparameterne:

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

Lag en komponent Employee som viser ansattdata på skjermen. La disse dataene være etternavn, fornavn, mellomnavn og lønn. Formater disse dataene i ønsket HTML-struktur. Vis tre ansatte med forskjellige data i App-komponenten.