Props dei componenti in React

Nella lezione precedente abbiamo visualizzato diverse istanze di prodotti:

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

Per ora ogni chiamata del tag del prodotto visualizza la stessa cosa. Adesso rendiamo ogni prodotto unico.

Supponiamo, ad esempio, che ogni prodotto debba avere un nome e un prezzo. Facciamo in modo che ogni chiamata del tag del prodotto visualizzi un prodotto con il proprio nome e prezzo, formattati nel markup desiderato.

Per fare questo dobbiamo compiere diversi passaggi.

Per cominciare, quando chiamiamo il tag del prodotto, scriveremo in questo tag due attributi: l'attributo name con il nome del prodotto e l'attributo cost con il prezzo, in questo modo:

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

I nomi e i valori di questi attributi arriveranno sotto forma di oggetto nel primo parametro della funzione costruttore del nostro componente Product:

function Product(props) {
	console.log(props); // oggetto con chiavi name e cost
	
	return <p>
		product
	</p>;
}

Il nome del parametro può essere qualsiasi, ma in React è consuetudine chiamarlo props. In realtà non è solo il nome di un parametro, ma un concetto importante di React.

L'essenza di questo concetto è la seguente: quando si chiama il tag di un componente in questo tag si possono scrivere attributi con i dati. Questi dati andranno nelle props del componente. Successivamente il componente può utilizzare questi dati, ad esempio, per creare il markup desiderato.

Facciamolo:

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

È più comodo e più comune non utilizzare l'oggetto props, ma eseguire immediatamente la destrutturazione delle props direttamente nei parametri della funzione:

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

Crea un componente Employee che visualizzi i dati di un impiegato sullo schermo. Lascia che questi dati siano cognome, nome, patronimico e stipendio. Formatta questi dati nel markup che preferisci. Visualizza nel componente App tre impiegati con dati diversi.