Component Props in React

In de vorige les hebben we meerdere productinstanties weergegeven:

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

Momenteel toont elke aanroep van de producttag hetzelfde op het scherm. Laten we nu elk product uniek maken.

Stel dat elk product bijvoorbeeld een naam en een prijs moet hebben. Laten we ervoor zorgen dat elke aanroep van de producttag een product weergeeft met zijn eigen naam en prijs, opgemaakt in de gewenste opmaak.

Hiervoor moeten we verschillende stappen doorlopen.

Om te beginnen zullen we bij het aanroepen van de producttag in deze tag twee attributen schrijven: het attribuut name met de productnaam en het attribuut cost met de prijs, zoals dit:

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

De namen en waarden van deze attributen zullen als een object in de eerste parameter van de functie-constructor van onze component Product terechtkomen:

function Product(props) {
	console.log(props); // object met keys name en cost
	
	return <p>
		product
	</p>;
}

De parameternaam kan willekeurig zijn, maar in React is het gebruikelijk om deze props te noemen. Feitelijk is dit niet zomaar een parameternaam, maar een belangrijk concept in React.

De essentie van dit concept is als volgt: bij het aanroepen van een componenttag kunnen in deze tag attributen met gegevens worden geschreven. Deze gegevens zullen in de props van de component terechtkomen. Vervolgens kan de component deze gegevens gebruiken, bijvoorbeeld om de gewenste opmaak te creëren.

Laten we dit doen:

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

Het is handiger en meer gebruikelijk om niet het object props te gebruiken, maar direct destructuring van de props uit te voeren rechtstreeks in de parameters van de functie:

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

Maak een component Employee die de gegevens van een werknemer op het scherm weergeeft. Laat deze gegevens achternaam, voornaam, patroniem en salaris zijn. Geef deze gegevens weer in de gewenste opmaak. Geef in de component App drie werknemers weer met verschillende gegevens.