Comment mapper une liste de données dans Reactjs ?

Dans React.js, vous pouvez mapper une liste de données en utilisant la fonction JavaScript `.map()`.

`Array.map()` est un moyen efficace d’itérer sur un tableau de données et de retourner un nouveau tableau transformé, sans modifier le tableau d’origine.

Par exemple, si vous avez une liste de noms et que vous voulez afficher tous ces noms dans des éléments de type `

`, vous pouvez le faire de cette façon:

```
class App extends React.Component { constructor() { super(); this.state = { names: [‘Alice’, ‘Bob’, ‘Charlie’, ‘David’] } }

render() { return (

{name}

); } }

ReactDOM.render(, document.getElementById(‘root’));
```

Dans l’exemple ci-dessus, nous utilisons `.map()` pour itérer sur le tableau `names` dans le `state`. Pour chaque `name`, nous retournons un élément `

` avec le `name` comme contenu.

Au sein de la fonction `.map()` nous avons également passé un second argument appelé `index`. C’est la position actuelle de l’élément dans le tableau. Cet `index` est utilisé pour définir une `key` unique pour chaque élément `

`. React utilise cette `key` pour identifier quels éléments ont changé, sont ajoutés ou sont supprimés et décide quelles modifications apporter spécifiquement à l’interface utilisateur de manière efficace.