In React, props (abbreviazione di proprietà) rappresentano un meccanismo potente per personalizzare e trasferire dati da un componente genitore a uno figlio. Questa funzionalità consente di creare componenti riutilizzabili e flessibili all'interno dell'applicazione.

Passaggio delle Props

Immagina di sviluppare un negozio online.

In questo contesto, abbiamo un componente principale chiamato App e desideriamo visualizzare le informazioni sui prodotti utilizzando un componente Product. Possiamo trasferire il nome e il prezzo del prodotto come props da App a Product.

Ecco come si applica nella pratica:

// Parent Component (`App`)
const App = () => (
  <>
    <h1>Online Store</h1>
    <Product name="Green iguana" price={579} />
  </>
);

Nel componente App, includiamo il componente Product e gli passiamo le props: name con il valore "Green iguana" e price con il valore 579.

Ricezione e utilizzo delle Props

Ora, esaminiamo il componente Product, che riceve queste props:

// Child Component (`Product`)
const Product = (props) => (
  <>
    <p>Product name: {props.name}</p>
    <p>Price: ${props.price}</p>
  </>
);

Nel componente Product, lo definiamo per accettare un singolo argomento chiamato props. All'interno del componente, possiamo accedere ai valori di queste props utilizzando la notazione punto (.) seguita dal nome della proprietà (ad esempio, props.name e props.price).

Utilizzo pratico

Con questo approccio, abbiamo creato un componente Product che può essere riutilizzato più volte con diverse informazioni di prodotto. Possiamo facilmente personalizzare il contenuto testuale di ciascun componente Product fornendo props differenti.

<Product name="Yellow cheetah" price={1099} />
<Product name="Panda" price={449} />

Ora abbiamo la flessibilità di visualizzare vari dettagli di prodotto utilizzando lo stesso componente Product.

Codice completo dell'app: