Nell’ambito di Reactjs, spesso si ha a che fare con liste di dati che devono essere visualizzate in qualche modo all’utente. Un modo efficiente e pulito per farlo è fare uso della funzione map() di JavaScript integrata direttamente nelle espressioni JSX di React.
Ecco un esempio di base:
```
function App() {
const data = [‘primo’, ‘secondo’, ‘terzo’]
{item}
))}export default App
```
In questo esempio, la funzione `map()` scorre ogni elemento nell’array `data` e per ciascun elemento restituisce un paragrafo che contiene questo elemento. Questo paragrafo viene quindi visualizzato su schermo.
Importante notare l’uso dell’attributo `key` nell’elemento `p`. Questo è utilizzato da React per tracciare quali elementi sono cambiati, sono aggiunti, o sono rimossi, e dovrebbe essere un valore univoco per ciascun elemento. In assenza di un ID naturale, si può utilizzare l’indice dell’elemento nell’array, anche se ciò può causare problemi se l’ordine degli elementi può cambiare.
È inoltre possibile utilizzare la mappatura per creare componenti più complessi, ad esempio liste di elementi interattivi:
```
function App() {
const data = [
{ nome: ‘Mario’, eta: 30 },
{ nome: ‘Luigi’, eta: 25 },
{ nome: ‘Peach’, eta: 20 }
]
function Persona({ nome, eta }) { return (
{eta} anni
export default App
```
In questo esempio, stiamo mappando un array di oggetti per creare un componente Persona per ciascun oggetto. Ogni componente Persona visualizza il nome e l’età della persona passata.
