Props dei componenti in React

Nella lezione precedente abbiamo visualizzato diverse istanze di prodotti:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

jsxfunction 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:

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