Propsy komponentów w React

W poprzedniej lekcji wyświetliliśmy kilka instancji produktów:

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

Na razie każde wywołanie tagu z produktem wyświetla to samo. Zróbmy teraz tak, aby każdy produkt był unikalny.

Niech na przykład każdy produkt ma nazwę i cenę. Zróbmy tak, aby każde wywołanie tagu z produktem wyświetlało produkt ze swoją nazwą i ceną, sformatowanymi w odpowiedni dla nas kod HTML.

Aby to zrobić, musimy wykonać kilka kroków.

Na początek przy wywoływaniu tagu z produktem będziemy zapisywać w tym tagu dwa atrybuty: atrybut name z nazwą produktu i atrybut cost z ceną, w ten sposób:

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

Nazwy i wartości tych atrybutów będą trafiać w postaci obiektu do pierwszego parametru funkcji-konstruktora naszego komponentu Product:

function Product(props) {
	console.log(props); // obiekt z kluczami name i cost
	
	return <p>
		product
	</p>;
}

Nazwa parametru może być dowolna, ale w React przyjęło się nazywać go props. Faktycznie to nie tylko nazwa parametru, ale ważna koncepcja React.

Istota tej koncepcji jest następująca: przy wywołaniu tagu komponentu w ten tag można zapisywać atrybuty z danymi. Te dane będą trafiać do propsów komponentu. Następnie komponent może używać tych danych, na przykład, do stworzenia odpowiedniego kodu HTML.

Zróbmy to:

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

Wygodniej i bardziej przyjęte jest nieużywanie obiektu props, ale natychmiastowe wykonanie destrukturyzacji propsów bezpośrednio w parametrach funkcji:

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

Stwórz komponent Employee, wyświetlający dane pracownika na ekranie. Niech tymi danymi będą nazwisko, imię, drugie imię i pensja. Sformatuj te dane w odpowiedni dla Ciebie kod HTML. Wyświetl w komponencie App trzech pracowników z różnymi danymi.